html div剩下高度设置,使div填充剩余屏幕空间的高度

使用flexbox，您可以轻松地在具有固定尺寸，内容大小尺寸或剩余空间尺寸的任何行或列之间切换。在我的示例中，我已将标题设置为与其内容对齐(根据OPs问题)，我添加了一个页脚以显示如何添加固定高度区域，然后设置内容区域以填充剩余空间。

html,

body {

height: 100%;

margin: 0

}

.box {

display: flex;

flex-flow: column;

height: 100%;

}

.box .row {

border: 1px dotted grey;

}

.box .row.header {

flex: 0 1 auto;

/* The above is shorthand for:

flex-grow: 0,

flex-shrink: 1,

flex-basis: auto

*/

}

.box .row.content {

flex: 1 1 auto;

}

.box .row.footer {

flex: 0 1 40px;

}

header

(sized to content)

content

(fills remaining space)

footer (fixed height)