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:
background:#efebd7 url(../images/main-container-bg.png) repeat-y center center;
<div id=”main-container-bg”><div id=”main-bg”></div></div>