Get a DIV wrapper to fill the entire page with CSS

Question

Hey guys,

I have a layout made up of several DIvs, a navbar on top, a footer dv on the bottom and a wrapper called #frame between the two to hold the content.

<div id="nav">
 navbar
</div>

<div id="frame">
 Content
</div>

<div id="footer">
 (c) 2010 MySite.com
</div>

The content in #frame will obviously vary depending on the page, and I want to make sure that even if there's only a few lines in #frame it will fill the entire screen and ensure that #footer is always resting at the bottom of the page. Trying height:100% ends up adding vertical scrollbars because of the extra height taken up by the header and footer, and I'd definitely like to avoid this as well.

I currently am getting around the issue by making #frame's CSS height 89%, but I know this is an ugly hack and will break if I change the header and/or footer. Anyone know a more elegant way to accomplish this?

Answer 1

If your footer is simple like the one in the example, then you are in luck. When you know the height of the footer, either in px or em, you can absolutely position it at the bottom of the page and add the footer's height in bottom padding to #frame. If the footer is very fluid, then you will have trouble forcing it down and there is no properly elegant solution for the layout you are describing (flexbox will do it on WebKit and Gecko though; just wait until IE catches up).

Answer 2

I was in this boat a while ago, check This Link out and see if that helps.