CSS 컨텐트의 높이와 관계 없이 푸터가 항상 하단에 위치

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>