How to get a div to stretch right down to a fixed footer

Question

I wish the two sections of my design (see attached image) to extend the whole height of the page. I have tried to create a Fiddle but it just won't work in there, so I've put up a link here to demo what I mean.

I have set the height of the div that holds the results to 100%. However, it doesn't stretch right down to the fixed footer.

#found-results { 
    height: 100%px;
    margin-bottom: 50px;
    background: #CCC;
}

I also want the green box to stretch down to the footer. The CSS is:

.main {
    width: 606px;
    float: left;
    padding: 15px 0 0 16px;
    position: absolute;
    background: green;
    margin-left: 383px;
}

Now, if I add height: 100%; to it, it seems to work, but if one of the tabs contains a lot of text, it doesn't stretch far enough.

Any help will be much appreciated.

Answer 1

Equal-height columns

In a way, the tricky part isn't the fixed header and footer, or the 100% height; the tricky part is the equal-height columns. Often, it's better to fake equal-height columns (e.g., adding a grey-green background image to the parent container). Doing so typically allows the code to be simpler, more flexible, and more stable, compared to true equal-height columns. If the layout for this website proves too unwieldy, try faking the equal-height columns instead (as shown in this demo), and see if that helps the layout to become more manageable.

With that being said, the basic options for true equal-height columns are as follows:

• HTML tables
• CSS tables
• CSS3 flexbox
• CSS3 grids
• JavaScript or jQuery

Here's a JSFiddle demo with true equal-height columns using CSS tables. The left column has very-tall content, and the right column has short content. The demo tested fine in IE10, Firefox, Chrome, Safari, and Opera; however, this may only work for relatively-simple layouts.

Here's a similar demo using HTML tables, in case support for IE8 is needed.

Faking the equal-height columns

Here's another demo that fakes the equal-height columns by adding a 2-color background image. This demo also tested fine in IE10, Firefox, Chrome, Safari, and Opera; however, unlike the previous ones, it's much more likely to support complex page layouts.

HTML

<div id="header">...</div>
<div id="content" class="clearfix">
    <div class="column1">...</div>
    <div class="column2">...</div>
</div>
<div id="footer">...</div>

CSS

html, body {
    height: 100%;
    ...
}
#header {
    position: fixed;
    top: 0;
    height: 120px;
    ...
}
#footer {
    position: fixed;
    bottom: 0;
    height: 60px;
    ...
}
#content {
    min-height: 100%;
    padding: 120px 0 60px 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    background: url(some-two-color-background.png) repeat-y 53.6% top;
    ...
}
#content .column1 {
    float: left;
    width: 250px;
}
#content .column2 {
    float: left;
    width: 350px;
}

Note: The apparent column widths for the background image are controlled by setting the background-position property. This allows two columns of any explicit width (px or %) to be faked using the same generic background image. Alternately, a custom background image with the exact column sizes could be used, to simplify the CSS.