三行网页布局是前端开发中非常常见的布局场景，通常由顶部的导航栏、中间的内容区域和底部的页脚组成，其中中间内容区域需要高度自适应，也就是当内容较少时，中间区域高度刚好包裹内容，当内容较多时，中间区域会随之变高，同时整体布局不会出现错乱。
核心实现思路
要实现中间内容高度自适应的三行布局，最推荐的方式是使用flex弹性布局，核心逻辑是将整个容器设置为flex布局，方向设置为纵向排列，然后让中间的内容区域设置flex:1属性，这样中间区域就会自动占据除顶部和底部之外的剩余空间，同时根据内容多少自动调整高度。
具体实现步骤
1. 基础HTML结构
首先搭建三行布局的基础结构，分别定义顶部、中间、底部三个区域：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三行自适应布局</title>
<style>
/* 样式后续补充 */
</style>
</head>
<body>
<div class="container">
<header class="top">顶部导航栏</header>
<main class="content">
<p>这里是中间内容区域</p>
<p>可以动态添加更多内容测试高度自适应效果</p>
</main>
<footer class="bottom">底部页脚</footer>
</div>
</body>
</html>
2. 添加CSS样式
给容器和三个区域添加对应的样式，实现自适应效果：
/* 重置默认边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
/* 外层容器设置为flex纵向布局 */
.container {
display: flex;
flex-direction: column;
min-height: 100vh; /* 保证容器最小高度为视口高度 */
}
/* 顶部区域固定高度 */
.top {
height: 60px;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #ddd;
}
/* 中间内容区域设置flex:1，自动占据剩余空间 */
.content {
flex: 1;
padding: 20px;
background-color: #fff;
}
/* 底部区域固定高度 */
.bottom {
height: 40px;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #ddd;
}
3. 测试自适应效果
可以在中间内容区域添加更多内容，观察布局变化：
<main class="content">
<p>这里是中间内容区域</p>
<p>可以动态添加更多内容测试高度自适应效果</p>
<p>新增内容1</p>
<p>新增内容2</p>
<p>新增内容3</p>
<p>新增内容4</p>
<p>新增内容5</p>
</main>
当内容较少时，中间区域高度刚好包裹内容，底部会紧贴内容下方；当内容超过视口高度时，中间区域会随之变高，页面出现滚动条，整体布局依然保持三行结构。
其他实现方式对比
除了flex布局，还有两种常见的实现方式，但是都存在一定的局限性：
| 实现方式 | 优点 | 缺点 |
|---|---|---|
| 定位布局 | 兼容性较好，老浏览器也能支持 | 需要手动计算中间区域高度，内容过多时容易出现溢出问题，适配性差 |
| 网格布局 | 语法简洁，布局能力强 | 部分老版本浏览器不支持，学习成本相对较高 |
| flex布局 | 语法简单，适配性好，自动处理高度分配 | 仅支持IE10及以上版本，不过目前主流浏览器都已经完美支持 |
注意事项
- 外层容器需要设置
min-height: 100vh，保证当内容较少时，容器至少占满整个视口高度，避免底部区域上浮。 - 中间区域的
flex:1是flex-grow:1、flex-shrink:1、flex-basis:0%的简写，作用是让该区域自动扩展占据剩余空间，同时可以收缩适应内容。 - 如果顶部或者底部区域的高度不是固定的，也可以给它们设置
flex-shrink:0，避免被压缩变形。
这种三行自适应布局方案适用于绝大多数需要顶部导航、中间内容、底部页脚的场景，比如后台管理系统、普通官网页面等，灵活度和兼容性都比较好。