用CSS样式实现表格高度填充满页面剩余空间

---

前言

图片展示的是表格填充满剩余空间的例子。

表格上方可能存在各种其它元素，如过滤信息，页面的title 等，因为不同用户屏幕尺寸，分辨率等。
造成表格上方内容占据的高度不一致，以至于下方表格填充满剩余空间就不能直接使用 height: calc(100% - **px)这种方式实现。。

大多数开发会使用js 代码 通过整体页面高度，减去表格上方元素占据 高度，从而给表格赋值计算后的高度
但是这种方法如果遇到会动态变化的宽度时又需要监听dom宽高变化，或者直接 绑定window.resize 事件等
以上方法监听dom 宽高一般需要用到插件，而绑定屏幕变化事件兼容又不太好（如果页面存在左侧菜单栏展开，收缩，那header高度也会变化，但是不会触发window.resize ）

以下就使用CSS 实现这个功能（可能也有朋友说非常简单呀，那看完再说实现方法是否一样吧）

---

一、使用 flex-grow 自动铺满

使用flex 垂直排列的方式，设置表格容器 flex-grow 值，使设置了的dom 高度上铺满剩余空间。

参考下面代码：

<div class="page-box">
	<div class="page-title">测试页面</div>
	<div class="page-header">里面内容有很多，会根据不同屏幕尺寸换行</div>
	<div class="page-table">table 组件的容器</div>
</div>

.page-box {
	/* 这里至少需要保证，此容器的高度是铺满屏幕的 */
	height: 100%;
	display: flex;
	flex-direction: column; /* 主轴为垂直方向，起点在上沿。 */
}

.page-box .page-table {
	flex-grow: 1; /* 可以是任意大于1 的值，其他相邻元素默认为0, 1 就会铺满剩余空间 */
}

这样就实现了表格的容器高度铺满剩余空间，非常简单对不，可以再看看的下方

flex-grow 演示demo

二、注意flex-grow 默认是内容宽高优先

因为flex-grow 设置的 样式默认情况是内容优先，意思就是，如果设置了flex-grow 的dom 内部 元素比剩余空间设置了更大的值的情况下，这个dom 高度会超过剩余空间。

一般使用表格组件就会出现这种问题，表格因为要模拟好看的滚动效果，所以里面会存在设置固定高度的元素，根据容器宽高实时计算，这就有逻辑上的冲突了

设置flex-grow 的这个 dom 默认是内容优先，当容器高度小于设置了固定值的表格组件高度时，没法再小下去了，而容器高度不能变化时，表格也没法自适应更改宽高了

所以需要在 设置 flow-grow的 这个元素上加上 min-heihgt: 0 或者 height: 0，让它不受内部元素最小高度影响。

点击看demo效果 拖动红线查看表格效果
注释demo中 min-height: 0; 查看未注释时 表格效果差异

总结

以上就是表格自动填充满页面剩余空间的实现方式了，在能用样式实现功能的时候，尽量不要用js去实现，毕竟js 实现需要考虑的方面就更多了。

以上信息如有疏漏或错误，欢迎指正，谢谢！