[Solved] CSS, content expand, sticky footer

[jwoodhams]

Can anyone help me understand why this isn’t working? I have a page that when I set the footer position to absolute and anchor it to the bottom, the div content above it, will not move the footer down.

HTML Code:

    <div></div>
    <div>

    </div>
  <div></div>

CSS: form { height:100%; } .header { position: relative; margin: 0px; padding: 0px; width: 820px; height:115px; margin-right:auto; margin-left:auto; } .page { position:relative; height:auto; width: 800px; margin: 0px auto 0px auto; padding-bottom:146px; border:0px solid blue; } .footer { clear:both; position:absolute; bottom:0px; height:146px; width:100%; padding: 0px; margin: 0px auto; background-image:url(../Images/FooterBG.jpg); }

On pages with little content, the footer appears at the bottom as it should. However, on pages with a lot of content, the expanding content does push the footer down below the browser viewport. Anyone have any thoughts?

[Paulie_D]

Isn’t that what you wanted when you positioned it like that?

If not, you might want to look into Fixed position.

[jwoodhams]

Thanks so much. Strangely enough, after a reboot on my development PC, the exact same code is now working. Strange thought the behavior prior to the reboot was the same on IE, FF, and Safari. Could this have been something to do with Visual Studio?

[Author]

Posts