Question

在JSFiddle example中，您可以看到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%;
}

<强> FIDDLE

Answer 2

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

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

Division at bottom side

Answer 3

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

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

.last
{
    height: 100%;
}

表行自动高度

3 个答案:

CSS