IT/CSS
CSS 컨텐트의 높이와 관계 없이 푸터가 항상 하단에 위치
storya
2019. 2. 11. 22:55
CSS 컨텐트의 높이와 관계 없이 푸터가 항상 하단에 위치
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#header {
position: relative;
height: 50px;
background: #02c7ea;
}
#content {
min-height: 100%;
margin: -50px 0 -50px 0;
}
#main {
padding: 50px 0 50px 0;
}
#footer {
height: 50px;
background: #02c7ea;
}
</style>
<div id="header">상단</div>
<div id="content">
<div id="main">본문</div>
</div>
<div id="footer">하단</div>
반응형