항상 페이지 하단에 있어야 하는 footer 영역을 잡아주기 위한 레이아웃의 방법 중 하나입니다.
참고한 사이트는 Las Vegas Web Design 입니다.
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
실행을 해보시면 이렇게 레이아웃이 잡힙니다.
push의 영역이 존재하는 이유는 컨텐츠의 영역이 길어졌을 경우 footer영역의 침범을 막기 위해,
footer의 높이값과 동일한 엘리먼트를 만드는것입니다.
css를 보시면 wrapper 의 height값이 두번 들어가있습니다.
하나는 height:auto !important; 이고 다른 하나는 height:100%; 입니다.
ie6 버전의 버그로 인하여 height:100%를 추가 한듯 합니다. ^^;;
*참고사이트 ( 다른 방법의 레이아웃 만드는 방법입니다.)
신현석님 사이트 - 브라우져 화면의 100% 높이를 유지하는 레이아웃
[블로그 꾸미기 추천 책]
댓글을 달아 주세요