在做首页左右分栏布局时，经常会遇到左右栏内容量不同导致高度不一致的情况，比如左侧导航只有几个菜单项，右侧内容区域有较多的图文信息，最终页面底部会出现一边高一边低的视觉效果，破坏整体布局的整洁性。传统方案可能需要用js动态计算较高栏的高度再赋值给较矮的栏，但是实现起来比较繁琐，而且页面 resize 时还需要重新计算。使用flex布局可以很轻松地解决这个问题，不需要额外的js逻辑，纯css就能实现左右栏高度自动对齐。
核心实现原理
flex布局的容器默认设置align-items: stretch，这个属性的作用是让所有子项在交叉轴方向上拉伸到和容器相同的高度。当我们把左右栏放在同一个flex容器中，只要不手动修改align-items的值，两个子项就会自动撑开到相同的高度，即使其中一个子项的内容较少，也会被拉伸到和另一个子项一样的高度。
基础实现步骤
1. 设置flex容器
首先给包裹左右栏的父容器设置display: flex，让它成为flex容器，同时可以根据需要设置容器的宽度、内边距等基础样式。
2. 设置左右栏子项
左右栏作为flex子项，只需要设置各自的宽度即可，不需要手动设置高度，高度会由flex容器自动分配。
3. 处理内容溢出情况
如果某一栏的内容高度超过了视口高度，flex容器会被撑开，此时左右栏依然会保持相同的高度，不会出现高度差。
完整代码示例
下面是一个可以直接运行的左右栏等高布局示例，左侧栏宽度30%，右侧栏宽度70%，内容量不同但高度会自动保持一致：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex左右栏等高布局示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
width: 100%;
min-height: 100vh; /* 容器最小高度为视口高度，保证初始状态下左右栏至少占满屏幕 */
}
.left-column {
width: 30%;
background-color: #f0f0f0;
padding: 20px;
}
.right-column {
width: 70%;
background-color: #e0e0e0;
padding: 20px;
}
.menu-item {
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
.content-item {
margin-bottom: 20px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<div class="left-column">
<h3>左侧导航</h3>
<div class="menu-item">首页</div>
<div class="menu-item">产品中心</div>
<div class="menu-item">关于我们</div>
<div class="menu-item">联系我们</div>
</div>
<div class="right-column">
<h3>右侧内容区</h3>
<div class="content-item">
这是第一条内容，flex布局可以让左右栏自动保持相同高度，不需要额外计算。
</div>
<div class="content-item">
这是第二条内容，即使左侧内容很少，右侧内容很多，两个栏的高度也会自动对齐。
</div>
<div class="content-item">
这是第三条内容，flex的align-items默认值为stretch，会让子项在交叉轴方向拉伸到容器高度。
</div>
<div class="content-item">
这是第四条内容，我们可以给容器设置min-height，保证初始状态下左右栏至少占满整个屏幕高度。
</div>
<div class="content-item">
这是第五条内容，当内容超过视口高度时，容器会被撑开，左右栏依然会保持相同的高度。
</div>
<div class="content-item">
这是第六条内容，这种布局方式比传统的js计算高度方案更简洁，维护成本也更低。
</div>
</div>
</div>
</body>
</html>
常见问题说明
- 如果手动给flex容器设置了
align-items: flex-start或者align-items: center，子项就不会自动拉伸，此时左右栏高度会由各自的内容决定，出现高度差，需要删除这个属性或者改回stretch。 - 如果某一栏需要固定高度，不要直接给子项设置
height属性，否则会覆盖flex的拉伸效果，导致高度不对齐。 - 如果左右栏内部还有嵌套的flex布局，只要父容器是flex且
align-items为默认值，嵌套的子项依然会保持等高效果。
兼容情况说明
flex布局在现代浏览器中都有很好的支持，包括Chrome、Firefox、Safari、Edge等，如果需要兼容旧版的IE浏览器，这种方案不适用，但是目前大部分项目已经不需要兼容IE，所以flex布局是首选的等高布局方案。
flexcolumn_heightlayoutcss修改时间：2026-06-13 12:19:00