Have a table fill the remaining height of its container

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

I am not sure how to do this with pure css, but there is a simple way of doing it with jQuery:

First wrap all the content that come before the table into another wrapper, then subtract its height from the fixed height (500 in this case), and that should give you the height of the table:

tmpHeight = $("#container").height() - $(".nonTableContainer").height();
$('table').css('height',tmpHeight+"px");

Here's the fiddle: http://jsfiddle.net/QLwkU/7/

Also you originally had 20px bottom margin for the paragraphs. In order to get the height of the non-table container properly you can either change the margin to padding or simply subtract 20 from tmpHeight in the jQuery code. In the fiddle above I changed the margin to padding.

Answer 2

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.

Answer 3

This kind of what you want but the borders on the table are making it extend.

http://jsfiddle.net/QLwkU/9/

Some more code would be needed to calculate the total border height and subtract that total from them the myTableHeight variable.

Answer 4

http://jsfiddle.net/QLwkU/8/ try this way. set some div before table, and give him some height, in this case 30%. And then give to table height 70%. So that div + table = 100% of container. Then you can put in that new div elements you want.

Answer 5

I had the same problem and I solved it using pure css.

So if you have a container with some content in it, and then you add a table within that container and you want the table to fill in the remaining height in that container, you simply set the height to 100% which means the table will take all the remaining space of the container.

<div id="container" style="height:200px">
Some random content 
<table style="height:100%;background-color:blue;"><tr><td>Test 1</td></tr></table>

</div>

Check this out for more details: http://jsfiddle.net/tonyawad88/StTAr/