CSS Height 100%


I have a fixed footer and some content with a background.  The designer wants the content background to expand all the way to the bottom whether there’s a lot of content or no content at all.  This seemed relatively easy, just put height:100% in the content and all its parent containers.  That didn’t work, no changes whatsoever.  Another trial and failure was to use a absolute positioned element with height 100%.  Again that didn’t work.  That just made the element 100% of the current window size.  So if the content expanded more than the window height, the background would not show.


There are many, many solutions, hacks, tips, and tricks to making a footer stick to the bottom of page.  The basic elements to making a footer stick to the bottom of a page are:

  • Make sure html and body have a height of 100%.  I can’t stress this one enough.
  • Make your wrapper element have a min-height of 100%.
  • Make sure you have something to inside the wrapper to have it account for floating element.  (things like clear:both or the clearfix hack will work here)
  • Place your footer outside of the wrapper div and set a height to it.
  • Make sure you have a negative margin-bottom and an equal positive margin-bottom on your wrapper div to be able to show the footer.

The best solution with an example I have found on the web is:  


Instead of using the push element you could just use a padding-bottom on the wrapper div though.

Another older solution, but still uses the same principles is:



Another solution where you don’t have to set the height of the footer is to use display:table.  This causes the element to act as a table and the height will truly be 100% of the page.  Simple enough, but what if you have your whole page all ready to go already and display:table screws up more than half your work.  Well, then you can put that element in a absolute positioned element at the bottom.  like so:

#main-container-bg {

#main-bg {
background:#efebd7 url(../images/main-container-bg.png) repeat-y center center;

<div id=”main-container-bg”><div id=”main-bg”></div></div>

Tagged with: ,

Leave a Reply

Your email address will not be published. Required fields are marked *