CSS Height 100%

Problem

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.

Solution

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:  

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

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:

http://www.electrictoolbox.com/html-css-footer/

——————————————————

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 {
position:absolute;
bottom:0;
left:50%;
margin-left:-500px;
width:1000px;
height:100%;
z-index:0;
}

#main-bg {
display:table;
height:100%;
background:#efebd7 url(../images/main-container-bg.png) repeat-y center center;
width:1000px;
}

<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 *

*