Push footer to page bottom by pure CSS

Jan 06
2010
Comments Off

First comes my html structure.

<body>
<div id="hd"></div>
<div id="bd">
<div class="layout"></div>
</div>
<div id="ft"></div>
</body>

Then css

html,body {
height:100%; /* required,or div#bd could not expand to full page height */
}
#hd {
height:50px;
margin-bottom:-50px; /* use negative margin-bottom of #hd instead of negative margin-top of #bd */
}
#bd {
min-height:100%; /* doesn't work under fucking IE6,write JS for it */
}
#bd .layout {
padding:50px 0 50px 0;/* 50px on top for header and 50px on bottom for footer */
}
#ft {
margin-top:-30px; /* I didn't use -50px curz I like to leave some while in the page bottom edge */
}

Written by Snow.Hellsing in: Uncategorized |