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

小编典典

2015年更新：Flexbox方法

还有两个简短提及flexbox的答案；但是，那是两年多以前的事了，他们没有提供任何示例。flexbox的规范现在肯定已经确定。

注意：尽管CSS Flexible BoxesLayout规范处于候选推荐标准阶段，但并非所有浏览器都已实现。WebKit实现必须以-webkit-为前缀；Internet Explorer实现了规范的旧版本，并带有-ms-前缀。Opera12.10实施了该规范的最新版本，没有前缀。有关最新兼容性状态，请参见每个属性的兼容性表。

所有主要的浏览器和IE11 +都支持Flexbox。对于IE 10或更早版本，可以使用FlexieJS填充程序。

工作实例

使用flexbox，您可以轻松地在具有固定尺寸，内容尺寸尺寸或剩余空间尺寸的任何行或列之间进行切换。在我的示例中，我设置了页眉以使其与内容对齐(按照OP问题)，添加了页脚以显示如何添加固定高度的区域，然后设置内容区域以填充剩余的空间。

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;

}

在上面的CSS中，flex属性是flex-grow，flex-shrink和flex-basis属性的简写形式以建立flex项目的灵活性。Mozilla 很好地介绍了弹性盒模型。

2020-05-10