There's a ton of questions about 100% height elements. There's also a ton of questions about how to keep footers down. Well, this is yet another one...
I've been building a site and I have problems with positioning my footer and having 100% height elements on the page. My page looks currently like this.
I've tried almost everything I could possibly have found but nothing seems to work. If you look at the CSS code, do you find something that breaks the footer positioning and the height settings?
Check out The css sticky footer
You want your HTML To resemble this:
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
So, in your example (your website) you would want the footer to be outside of the container. From here you can simply check the CSS on the link provided above and your footer will stick to the bottom of the page while your DIV expands full height.
#contentWrapper{
padding: 0;
margin-left: 230px;
height: 100%;
background-color: #FFFFFF;
overflow: auto; /*I added this*/
}
#grass {
background: url("../images/layout/grass.png") repeat-x;
width: 100%;
bottom: 59px;
height: 248px;
position: fixed; /*Change absolute to fiexed*/
}