页脚始终位于页面底部(即使内容很短)
演示: http: //gvee.co.uk/files/html/footer.htm
HTML
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
CSS
*
{
margin: 0;
padding: 0;
border: 0;
}
html, body
{
height: 100%;
}
#container
{
min-height: 100%;
position: relative;
}
#header
{
background: #ff0;
padding: 10px;
}
#body
{
padding: 10px;
padding-bottom: 60px; /* Height of the footer */
}
#footer
{
position:absolute;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
background: #6cf;
}
条件 IE CSS
<!--[if lte IE 6]>
<style type="text/css">
#container
{
height: 100%;
}
</style>
<![endif]-->