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/

此外，您最初的段落底部边距为20px。为了正确获取非表容器的高度，您可以将边距更改为填充，或者只是在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/

有一个表填充其容器的剩余高度

5 个答案: