CSS 表格行的自动高度

Auto height of table-row

提问by Georgy Liparteliani

In JSFiddle exampleyou can see 2 table-rows. I need the first one's height to be set automatically. Second one's height need to be set to the bottom of the page. But the browser sets table row height as 50%...

在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;
}

回答by Danield

Set height:100%on the second row.

设置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

CSS

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

FIDDLE

小提琴

回答by Satyam Koyani

content which you want to show at bottom of the page apply this class to that division.

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

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

Division at bottom side

底部分割

回答by user9681907

Just Add these lines and you will get the required result:

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

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

.last
{
    height: 100%;
}