css - 表格行的自动高度

Question

在JSFiddle 示例中，您可以看到 2 个表格行。我需要自动设置第一个高度。第二个的高度需要设置为页面的底部。但是浏览器将表格行高设置为 50%...

.table {
    display: table;
    table-layout: auto;
}
html,body {
    height: 100%;
    min-height: 100% !important;
}

.row {
    display: table-row;
    border: 1px solid black;
}

Answer 1

设置height:100%在第二行。

<div class="row">
        <div>Some text</div>
        <div>Text again</div>
    </div>
    <div class="row last">
        <div>Need height to bottom</div>
    </div>

CSS

.row {
    display: table-row;
    border: 1px solid black;
}
.last
{
    height: 100%;
}

小提琴

Answer 2

您想在页面底部显示的内容将此类应用于该部门。

.row { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}

底部分区

Answer 3

只需添加这些行，您将获得所需的结果：

<div class="last">
    <div>Need height to bottom</div>
</div>

.last
{
    height: 100%;
}