Html 让桌子填满容器的剩余高度

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

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

</div>

我有以下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中将容器和子元素设置为table和table行，这会导致其他元素太大或在它们的边距内松动

小提琴可在以下位置找到：

我希望有一个纯CSS的解决方案来解决这个问题，但是如果它是一个合理的、可重用的jQuery解决方案，我不会有任何问题

我试过：

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

但是，如果需要的话，这使得在表格中增加一个余量有点困难

---

如果您有任何想法或建议，我们将不胜感激。

我不知道如何使用纯css实现这一点，但使用jQuery有一种简单的方法：

首先将表格前面的所有内容包装到另一个包装器中，然后从固定高度（本例中为500）中减去其高度，即得出表格的高度：

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

这是小提琴：

---

另外，您最初在段落中有20px的底部边距。为了正确获得非表容器的高度，您可以将边距更改为padding，或者在jQuery代码中从tmpHeight中减去20。在上面的小提琴中，我将边距改为填充。

试试这种方法。在桌子前放一些div，给他一些高度，在这种情况下是30%。然后给桌高70%。因此div+table=容器的100%。然后你可以放入你想要的新div元素。

这是你想要的，但是表上的边框使它扩展了

---

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

好的，谢谢大家的建议。对于这一点，我将采取一个稍微修改的版本，以满足我的需要，使事情更具活力。我将表的外部大小和内部大小的差异添加到计算中，以防在表上使用边距

$('#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中的非表内容相同

工作小提琴：

---

谢谢你的建议。希望新的CSS3盒子模型能使这个过程变得更简单。

我也遇到了同样的问题，我用纯css解决了这个问题

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

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

</div>

一些随机内容
测试1

---

查看此项了解更多详细信息：

为什么不设置高度：自动；或身高：100%；到容器？因为我有一个固定的容器高度，我不希望容器自身调整大小。我只希望表格在放置其他内容后只占用剩余的空间。您需要如何跨浏览器？您可以使用

display:table cell

或，但浏览器支持有限（flexbox非常有限）。你确定你想让你的表格的单元格根据兄弟尺寸变化如此之大的高度吗？它至少需要在IE-8中工作。如果你阅读他的问题，他会提到“未知数量的自调整大小段落”。您的解决方案仅适用于此示例。您是对的，您的解决方案计算非表元素的宽度。你的解决方案是答案。当我在Chrome 24中测试这个时，表的高度实际上是整个容器的高度，例如，如果你有一个100px高的容器和一个25px高的div，表的高度为100%，那么表的高度为100px，导致容器div溢出到125px。幸运的是它不是递归的：）。你是对的。。。我只是注意到了。我想我会回到js来解决这个问题。