구글에 접속하면, 페이지 하단에 떡 붙어있는 푸터를 볼 수 있다. 브라우저 크기를 줄이면 줄이는데로 올라오는 이 푸터를 구현해보려한다.

다음과 같은 가장 간단한 구조를 html문서의 body에 작성한다.

<div id="body">
	<div id="content">
		BODY
	</div>
</div>
<div id="foot">
	FOOTER
</div>

그리고 CSS는 다음과 같이 작성한다.

html,body{height:100%}
body{margin:0}
#body{min-height:100%}
#content{padding-bottom:1.9em}
#foot{margin-top:-1.9em;height:1.9em}

이것으로 하단 고정 푸터 작성이 끝났다. 생각했던거 보다 말도 안되게 간단한게, 해냈다는 희열보다는 글쓴이를 욕하는 감정을 가진 사람도 있을 것같다.

다음 스타일을 약간 더 넣은 미리보기를 통해 정말 하단이 고정된 푸터가 만들어졌는지 확인해보라.

sticky footer.html

저작자 표시 비영리
신고
  1. sunny
    감사합니다.
  2. shifeed
    헐!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    퍼갈께요ㅠㅠ
  3. genie
    감사합니다!
  4. 유나
    도움 많이 되었어요 고맙습니다.
  5. 김선규
    크게 도움받았습니다 감사합니다

Name __

Password __

Link (Your Website)

Comment