本文介绍如何仅使用纯 css（无需 javascript）让上下堆叠的两个 div 始终保持相同高度，其中下方 div 高度由内容决定，上方 div 自动拉伸匹配——核心方案是采用 css grid 的等分行布局。
在响应式布局中，常遇到这样的需求：两个垂直排列的容器（如标题栏 + 内容区），需始终保持视觉等高；当屏幕缩小时，下方内容区因文字换行而增高，上方区域也应同步拉伸，避免出现高度断裂或错位。传统 Flexbox 方案（如 flex-grow 或固定百分比）在此场景下往往失效——因为 flex-grow 依赖父容器有明确高度，而百分比高度又受限于无设定高度的父级，导致不可预测行为。
推荐解法：CSS Grid 等分布局
利用 CSS Grid 的 grid-template-rows: 1fr 1fr，可将容器划分为两条等比例、弹性自适应的轨道。关键在于：Grid 的 1fr 单位会自动将可用空间均分，且两行高度始终严格相等——无论内容多寡，Grid 会以「较高子项的高度为基准」，反向撑开较矮子项，实现真正的双向等高对齐。
以下是完整、可直接运行的示例代码：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid 等高双栏布局</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.container {
display: grid;
grid-template-rows: 1fr 1fr; /* 两行均分可用高度 */
gap: 0; /* 可选：控制间距 */
margin-bottom: 25px;
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.b1 {
background-color: #ff6b6b;
padding: 1.2rem;
font-weight: bold;
color: white;
/* 不设 height —— 由 Grid 统一控制 */
}
.b2 {
background-color: #ffa07a;
padding: 1.2rem;
line-height: 1.6;
color: #333;
}
/* 响应式增强：小屏下仍保持等高 */
@media (max-width: 600px) {
.container {
grid-template-rows: 1fr 1fr;
}
.b1, .b2 { padding: 0.8rem; }
}
</style>
</head>
<body>
<div class="container">
<div class="b1">标题区域</div>
<div class="b2">
内容区域：Lorem Ipsum 是印刷与排版行业的虚拟文本。自1500年代起，它就已成为该行业的标准模板文本。历经五个世纪，它不仅幸存下来，更成功过渡到电子排版时代……（内容随视口缩放自动换行，上方区域实时同步等高）
</div>
</div>
</body>
</html>✅ 优势说明：
- ✅ 零 JavaScript：完全声明式布局，无事件监听、无 DOM 操作、无重绘风险；
- ✅ 天然响应式：文字换行 → .b2 高度增加 → Grid 自动提升 .b1 高度，全程自动；
- ✅ 语义清晰：1fr 1fr 明确表达“均分”意图，比 Flex 的 hack 更易维护；
- ✅ 兼容性良好：现代浏览器（Chrome 66+、Firefox 63+、Safari 11.1+、Edge 16+）均原生支持。
⚠️ 注意事项：
- 若父容器（.container）本身高度未被约束（如未设置 min-height 或未处于有高度的上下文），Grid 行高将基于内容最小高度展开。此时建议确保 .container 至少具备 min-height: fit-content 或嵌入在有高度的布局流中；
- 避免对 .b1 或 .b2 显式设置 height、max-height 或 min-height（除非特殊需求），否则可能覆盖 Grid 的等分逻辑；
- 如需三栏及以上等高，只需扩展 grid-template-rows: 1fr 1fr 1fr，原理完全一致。
? 进阶提示：若需「上方固定最小高度 + 下方自适应」的混合模式，可改用 grid-template-rows: minmax(80px, 1fr) 1fr，兼顾灵活性与可控性。
综上，CSS Grid 不仅是布局利器，更是解决经典等高难题的优雅答案——告别 JS 计算、告别 Flex 陷阱，一行 1fr 1fr，即刻实现稳健、高效、可维护的双栏等高响应式布局。
