Question

I have a fixed size container with an unknown number of self sizing paragraphs and possibly other elements. I also have a table after that content. I want the table to fill the remaining height of the container.

I have the following HTML:

​<div id="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis. Sed semper dui sed ante. Sed luctus tincidunt nisl. Proin iaculis adipiscing nisl. Class aptent taciti sociosqu ad litora amet.</p>
    <p>Lorem ipsum dolor sit amet, consectetur cras amet.</p>
    <table>
        <thead>
            <tr>
                <th>One</th>
                <th>Two</th>
                <th>Three</th>
                <th>Four</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>111</td>
                <td>222</td>
                <td>33333</td>
                <td>4444</td>
            </tr>
            <tr>
                <td>111</td>
                <td>222</td>
                <td>33333</td>
                <td>4444</td>
            </tr>
            <tr>
                <td>111</td>
                <td>222</td>
                <td>33333</td>
                <td>4444</td>
            </tr>
            <tr>
                <td>111</td>
                <td>222</td>
                <td>33333</td>
                <td>4444</td>
            </tr>
        </tbody>
    </table>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

With the following CSS:

#container {
    width: 500px;
    height: 500px;
    background: red;
}

p {
    margin-bottom: 20px;
}

table {
    height: 100%;
    width: 100%;
}

table,
table th,
table td{
    border: 1px solid black;
}

Doing this causes the table to take the height of the container and not just the remaining area. I’ve tried setting the container and the children as table and table-row in CSS and that either causes the other elements to be too large or to loose within their margin.

A fiddle can be found at: http://jsfiddle.net/QLwkU/

I was hoping for a pure CSS solution to this, but I don’t have a problem if it is a reasonable and reusable jQuery solution.

I’ve tried:

var totalHeight = 0;
$('#container').children(':not(table)').each(function(){
    totalHeight += $(this).outerHeight(true);
});
$('#container table').css({'height': ($('#container').outerHeight() - totalHeight)});

But that makes it somewhat more difficult to add a margin to the table if one was needed.

Any thoughts or suggestions would be greatly appreciated.

Answer 1

OK, Thanks everyone for the suggestions. For this I’ll just take a slightly modified version to suit my needs a make things a little more dynamic. I added the difference in the outside size and inside size of the table to the calculation just in case a margin is used on the table.

$('#container table').css('height', (
    $('#container').height() -
    $('#preTableContainer').outerHeight(true) -
    ($('#container table').outerHeight(true) -
     $('#container table').height())
));

and the modified css

#container {
    width: 500px;
    height: 500px;
    background: red;
}

#preTableContainer {
    overflow: hidden;
}

p {
    margin-bottom: 20px;
}

table {
    width: 100%;
    margin-bottom: 20px;
}

table,
table th,
table td{
    border: 1px solid black;
}

The HTML is the same just with the non table content wrapped in its own div.

A working fiddle:

http://jsfiddle.net/QLwkU/10/

Thanks for all the suggestions. Hopefully the new CSS3 box model will make this an easier process.