顶部固定、底部自适应布局需用Flexbox或Grid实现，line-height仅控制行内文本间距，无法撑满剩余高度。推荐父容器设display: flex; flex-direction: column;，顶部/底部flex-shrink: 0，中间flex: 1。
顶部固定、底部自适应的布局，核心在于让中间内容区域自动撑满剩余高度，同时不遮挡固定顶部和（可选的）固定底部。仅靠“定义不同行高”无法实现真正的高度自适应布局——行高（line-height）只控制**单行文本的垂直居中与行间距**，它不影响容器高度计算，也不能让元素随视口动态伸缩。
顶部固定 + 中间自适应 + 底部自适应（非固定）
这是最常见需求：顶部导航栏固定，底部区域随内容自然堆叠（不固定位置），中间区域占满剩余空间。
- 给顶部设置
position: fixed; top: 0; width: 100%;，并用padding-top给 body 或主容器留出顶部高度，避免内容被遮挡 - 中间区域用
margin-top躲开顶部，再配合min-height: calc(100vh - 顶部高度 - 底部高度);（若底部有预估高度）或更稳妥的flex布局 - 推荐使用 Flexbox：将 body 或 wrapper 设为
display: flex; flex-direction: column;，顶部flex-shrink: 0;，中间flex: 1;，底部自然流式
顶部固定 + 底部也固定 + 中间滚动
类似 App 的「顶栏 + 底栏 + 中间列表」结构，两头不动，中间可滚动。
- 顶部和底部均设
position: fixed;，分别用top: 0;和bottom: 0; - 中间容器需避开两者：设置
top: [顶部高度]; bottom: [底部高度]; position: absolute; width: 100%; overflow-y: auto; - 或者用 Grid：容器
display: grid; grid-template-rows: [顶部高] 1fr [底部高];，再配合height: 100vh;
为什么不能靠 line-height 实现“自适应高度”？
line-height 是文本行内属性，作用对象是行框（line box）。即使设成很大值（如 line-height: 200px;）：
立即学习“前端免费学习笔记（深入）”；
- 只对**单行且无换行的内联内容**产生明显垂直拉伸效果
- 块级元素（如
div）本身无行高继承逻辑；设了也不会让容器高度等于行高 - 多行文本下，行高叠加的是各行之间的基线距离，不是容器总高，且无法响应视口变化
- 无法解决“剩余空间分配”这一布局本质问题
真正实用的自适应方案推荐
放弃行高思路，改用现代 CSS 布局模型：
-
Flexbox 方案：父容器
display: flex; flex-direction: column;，顶部/底部flex-shrink: 0;，中间区域flex: 1;—— 简洁、兼容性好（IE10+） -
Grid 方案：父容器
display: grid; grid-template-rows: auto 1fr auto;—— 语义清晰，适合复杂分层 -
Calc + 视口单位：中间区
height: calc(100vh - 60px - 44px);（假设顶60px、底44px）—— 需已知固定部分高度，适合简单场景
