使用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)
