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
Update: Another, probably better solution has been found at:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
or
http://www.electrictoolbox.com/html-css-footer/
In this solution simply setting the container with min-height:100% and margin-bottom: -100px or whatever the height of the footer is. And then a spacer at the bottom of the container so the footer doesn’t overlap the container.
——————————————————
THE solution 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>
