在网页布局开发过程中，经常会遇到这样的需求：一个容器内部有多个子元素，其中部分元素高度固定，剩下的元素需要自动占据容器剩余的垂直空间，并且当容器高度变化时，该元素的高度也能同步自适应调整。这种场景在前端布局里非常常见，比如顶部导航栏高度固定，下方内容区填充剩余页面高度，或者列表头部高度固定，列表内容区填充剩余容器高度等。
方法一：使用flex弹性布局实现
flex布局是目前实现这种需求最常用的方案，核心思路是将容器设置为flex布局，方向为垂直方向，然后给需要自适应高度的元素设置flex:1属性，该属性会让元素自动分配容器剩余的可用空间。
首先看基础的实现示例，容器高度固定为500px，内部有两个子元素，第一个子元素高度固定为100px，第二个子元素需要填充剩余空间：
/* 容器样式 */
.container {
display: flex;
flex-direction: column;
height: 500px;
border: 1px solid #ccc;
}
/* 固定高度的子元素 */
.fixed-height {
height: 100px;
background-color: #f0f0f0;
}
/* 自适应剩余空间的子元素 */
.auto-height {
flex: 1;
background-color: #e0e0e0;
}
对应的HTML结构如下：
<div class="container"> <div class="fixed-height">固定高度100px</div> <div class="auto-height">自适应剩余高度</div> </div>
这种方法的优势是兼容性较好，主流现代浏览器都支持，而且不需要手动计算高度，当容器高度发生变化时，自适应元素的高度会自动重新分配，适配性很强。需要注意的是，如果自适应元素内部有内容溢出的情况，可以额外添加overflow属性来控制内容的显示方式。
方法二：使用calc计算函数实现
calc函数是CSS内置的计算函数，支持对长度值进行加减乘除运算，我们可以通过计算容器总高度减去固定元素的高度，得到剩余空间的数值，直接赋值给目标元素的高度。
同样的场景，容器高度500px，固定元素高度100px，自适应元素的高度就可以通过calc(100% - 100px)计算得到：
/* 容器样式 */
.container {
height: 500px;
border: 1px solid #ccc;
}
/* 固定高度的子元素 */
.fixed-height {
height: 100px;
background-color: #f0f0f0;
}
/* 使用calc计算自适应高度 */
.auto-height {
height: calc(100% - 100px);
background-color: #e0e0e0;
}
对应的HTML结构和flex方案类似，这里不再重复展示。这种方法的优点是逻辑直观，容易理解，但是缺点也比较明显：如果有多个固定高度的元素，就需要手动把所有固定高度加起来再计算，当固定元素的数量或者高度发生变化时，需要同步修改calc里的计算表达式，维护成本较高，而且如果容器或者固定元素的高度是动态变化的，这种方案就无法很好的适配。
方法三：使用grid网格布局实现
grid布局是CSS中功能强大的二维布局方案，同样可以很方便的实现元素高度自适应剩余空间的需求，核心是通过设置网格行的高度规则，让目标行自动占据剩余空间。
实现示例：容器设置为grid布局，定义两行，第一行高度固定100px，第二行设置为1fr，fr单位表示剩余空间的分配比例，1fr就代表占据所有剩余空间：
/* 容器样式 */
.container {
display: grid;
grid-template-rows: 100px 1fr;
height: 500px;
border: 1px solid #ccc;
}
/* 固定高度的子元素 */
.fixed-height {
background-color: #f0f0f0;
}
/* 自适应剩余空间的子元素 */
.auto-height {
background-color: #e0e0e0;
}
这种方案和flex布局的效果类似，但是grid更适合处理复杂的二维布局场景，如果页面布局同时涉及行和列的复杂分配，使用grid方案会更加统一和方便。不过需要注意grid布局的兼容性比flex稍弱一些，在一些旧版本浏览器上可能不支持。
不同方案的适用场景对比
为了帮助开发者选择合适的方案，下面把三种主流方案的特点整理成对比表格：
| 实现方案 | 优势 | 劣势 | 适用场景 |
|---|---|---|---|
| flex布局 | 适配性好，自动分配空间，维护成本低 | 仅适用于一维垂直布局场景 | 单个容器垂直方向的高度自适应需求 |
| calc函数 | 逻辑直观，无布局依赖 | 多固定元素时维护成本高，不支持动态变化 | 固定元素少且高度不变的简单场景 |
| grid布局 | 适合复杂二维布局，分配规则统一 | 旧浏览器兼容性稍弱 | 同时涉及行和列复杂分配的布局场景 |
注意事项
- 无论使用哪种方案，都需要确保容器的高度是明确设置的，比如设置了具体的px值、百分比（且父元素高度明确）或者通过其他方式确定了高度，否则剩余空间的计算会失效。
- 如果自适应元素内部的内容高度超过了分配到的剩余空间，需要提前设置
overflow:auto或者overflow:hidden来处理溢出内容，避免出现布局错乱。 - 当页面需要兼容IE10及以下版本浏览器时，flex和grid方案都不支持，此时可以考虑使用calc函数，或者结合JavaScript动态计算高度来实现需求。
通过上述几种方法，基本可以覆盖所有CSS元素高度自适应容器剩余空间的开发场景，开发者可以根据实际的布局需求、兼容性要求和后期维护成本来选择最合适的实现方案。