ansaurus

Question

A Sticky footer than doesn't apply to all pages

Answer 1

A:

The best I've ever been able to do is push the footer to off the bottom of the page so it is always off the bottom of the screen. The following is an example of how to do this. The stickyfooterfail division does not work and I do not know why but the bottom property does work properly if you cahnge position to absolute.

<html>
  <head>
    <style type='text/css'>
body {
height: 100%;
}

#fullheight {
background:#ff0;
position: relative;
min-height: 100%;
}
#stickyfooterfail {
position: relative;
bottom: 0px;
}

#stickyfooter {
background: #f0f;
}
    </style>
  </head>
  <body>
    <div id='fullheight'>
      Some text<br>
      Some text<br>

      Some text<br>
      <div id='stickyfooterfail'>
        Should be at the bottom but isn't
      </div>
    </div>
    <div id='stickyfooter'>
        This is pushed off the bottom by the min-height attribute of #fullheight
    </div>
  </body>
</html>

If you know that the footer is going to be a constant absolute size then you could set padding-bottom to -(height) eg -40px if it was 40px high and then set bottom of #stickyfooterfail to the same value.

bearver 2009-12-19 16:16:52

The `#stickyfooterfail` doesn't work because relatively positioned elements are positioned relative to their original position in the flow. So setting `bottom: 0` means you're moving the bottom of the div zero pixels up from its original position. I.e. not at all.

mercator 2009-12-19 19:06:15

I misunderstood when I read the rules for it then since I thought it was positioned relative to the parent element. Thanks for the clarification.

bearver 2009-12-20 11:30:09

ansaurus

tags:

views:

answers:

A Sticky footer than doesn't apply to all pages

related questions