컨텐츠 영역 상관없이 footer가 하단에 붙게하려면 position:fixed를 하는 방법이 있지만 이건 하단고정이긴 한데..
위에 뜬 형태이기도 하면서 컨텐츠가 없든 많던간에 원하는 모습이 보여지지 않는다.
그래서 방법이 아래와 같다.
HTML 마크업:
<div id="wrap">
<div id="header">Header</div>
<div id="body">
<div id="container">Contents</div>
</div>
<div id="footer">Footer</div>
</div>
CSS:
html, body { margin:0; padding:0; height:100%; }
#wrap {
height:100%;
color:#fff;
}
#header {
position:relative;
width:100%;
height:45px;
background-color:#FD428E;
}
#body {
margin:-45px 0 -50px;
width:100%;
min-height:100%;
background-color:#24C3FF;
}
#body #container {
padding:45px 0 50px;
}
#footer {
width:100%;
height:50px;
background-color:#ff0000;
}
답글 남기기