Meow and Grrr of a Stray Cat

Life, opinions, tech notes, etc.

Push Page Footer to Window Bottom by Pure CSS

First comes my html structure.

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

Then css

html,body {
  /* required,or div#bd could not expand to full page height */
#hd {
  /* use negative margin-bottom of #hd instead of negative margin-top of #bd */
#bd {
  /* doesn't work under fucking IE6,write JS for it */
#bd .layout {
  /* 50px on top for header and 50px on bottom for footer */
  padding:50px 0 50px 0;
#ft {
  /* I didn't use -50px curz I like to leave some while in the page bottom edge */
posted at 2010-01-06 15:53:57 +0800
The author

Snow Helsing

Just a stray cat
Tagged in
tech coding css