하단바 고정을 위한 간단한 소스
http://sean86.tistory.com/28
http://sean86.tistory.com/attachment/cfile6.uf@243B313451219628116F17.zip
<style>
// 페이지의 높이를 브라우저 높이로 선언
html,body { height: 100%; margin: 0; padding: 0; }
#container {
min-height: 100%;
// relative 선언을 통해 하단바의 absolute position 이 정확한 위치에 오도록 한다.
position: relative;
// content 시작 위치부터 그라디언트 효과가 나타나도록 한다.
background: #0202F7 url('images/gr.jpg') 0 70px repeat-x;
}
#container #header {
height: 70px;
background-color: white;
}
#container #content {
// 하단바가 표시되는 공간 부여
padding-bottom: 50px;
}
#container #footer {
// 하단바를 하단에 고정
position: absolute; bottom: 0; width: 100%; height: 50px; background-color: silver;
}
</style>
<body>
<div id="container">
<div id="header">HEADER</div>
<div id="content">CONTENT</div> <div id="footer">FOOTER</div>
</div>
</body> |
댓글 없음:
댓글 쓰기