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

다음과 같은 가장 간단한 구조를 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
    2013.11.19 13:17
    감사합니다.
  2. shifeed
    2013.12.24 11:16
    헐!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    퍼갈께요ㅠㅠ
  3. ahem
    2014.06.23 12:38
    감사합니다.
  4. genie
    2014.07.07 11:00
    감사합니다!
  5. 유나
    2014.07.12 09:25
    도움 많이 되었어요 고맙습니다.
  6. 김선규
    2015.12.02 20:29
    크게 도움받았습니다 감사합니다

댓글 달기

Name __

Password __

Link (Your Website)

Comment