让一张桌子填满其容器的剩余高度

Question

我有一个固定大小的容器，其中包含未知数量的自定大小段落和可能的其他元素。在该内容之后我也有一张桌子。我想让表格填满容器的剩余高度。

我有以下 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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

使用以下 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;
}

这样做会导致表格占用容器的高度，而不仅仅是剩余区域。我尝试在 CSS 中将容器和子项设置为表格和表格行，这会导致其他元素太大或在其边距内松动。

可以在以下位置找到小提琴：http://jsfiddle.net/QLwkU/

我希望有一个纯 CSS 解决方案，但如果它是一个合理且可重用的 jQuery 解决方案，我没有问题。

我试过了：

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

但这使得在需要时向表格添加边距变得更加困难。

任何想法或建议将不胜感激。

Answer 1

我不知道如何用纯 css 做到这一点，但有一个简单的方法用 jQuery 做到这一点：

首先将表格之前的所有内容包装到另一个包装器中，然后从固定高度（在本例中为 500）中减去其高度，这样就可以得到表格的高度：

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

这是小提琴：http://jsfiddle.net/QLwkU/7/

此外，您最初的段落底部边距为 20 像素。为了正确获取非表格容器的高度，您可以将边距更改为填充或简单地从 jQuery 代码中的 tmpHeight 中减去 20。在上面的小提琴中，我将边距更改为填充。

Answer 2

好的，谢谢大家的建议。为此，我将采用稍微修改的版本来满足我的需要，让事情变得更有活力。我将表格外部尺寸和内部尺寸的差异添加到计算中，以防在表格上使用边距。

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

以及修改后的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;
}

HTML 是一样的，只是将非表格内容包裹在自己的 div 中。

一个工作小提琴：

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

感谢所有建议。希望新的 CSS3 盒子模型能让这个过程变得更简单。

Answer 3

这种你想要的东西，但桌子上的边框使它变长了。

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

需要更多代码来计算总边框高度并从中减去 myTableHeight 变量。

Answer 4

http://jsfiddle.net/QLwkU/8/ 试试这个方法。在桌子前设置一些 div，并给他一些高度，在本例中为 30%。然后给桌子高度 70%。这样 div + table = 100% 的容器。然后你可以放入你想要的新的 div 元素。

Answer 5

我遇到了同样的问题，我使用纯 css 解决了它。

因此，如果您有一个包含一些内容的容器，然后您在该容器中添加了一个表格，并且您希望表格填充该容器中的剩余高度，您只需将高度设置为 100%，这意味着table 将占用容器的所有剩余空间。

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

</div>

查看更多详情：http://jsfiddle.net/tonyawad88/StTAr/