使用 css grid 的 grid-template-rows: 1fr 1fr 可让上下两个 div 始终保持等高，且随内容动态伸缩，无需 javascript 即可实现响应式高度同步。
在现代 Web 开发中，常需让两个垂直堆叠的容器（如标题栏与内容区）始终保持相同高度——尤其当底部区域内容量大、易因响应式换行导致高度变化时，顶部区域需自动“拉伸”匹配。传统 flexbox 方案（如 flex-grow 或固定百分比）在此场景下往往失效：flex-grow 仅在父容器有明确高度时才生效，而纯流式内容会突破约束；JavaScript 虽可监听 resize 并手动同步高度，但增加了复杂度与性能开销。
推荐方案：css Grid 布局
CSS Grid 天然支持基于轨道（track）的弹性分配，通过将容器设为 display: grid 并定义均分的行轨道，即可实现零 js 的双向高度同步：
.container { display: grid; grid-template-rows: 1fr 1fr; /* 两行均分可用空间 */ margin-bottom: 25px; } .b1 { background-color: #ff6b6b; } .b2 { background-color: #ffa07a; } /* 重置默认 body 边距，避免干扰 */ body { margin: 0; } One DIV B Lorem Ipsum is simply dummy text of the printing and typesetting industry... ✅ 核心原理：1fr 表示“剩余空间的 1 份”，1fr 1fr 即将容器总高度平均分为两份，两个子元素各自占据一份——无论内容多少，Grid 自动拉伸二者填满分配的高度。当窗口缩放或文字换行导致 .b2 内容高度变化时，Grid 重新计算轨道尺寸，.b1 同步响应，视觉上始终等高。
⚠️ 注意事项：
- 此方案要求父容器（.container）自身具有明确的高度来源（如由内容撑开、或设置 min-height），否则 1fr 将无参照基准；
- 若需保留 .b1 的最小内容高度（如避免文字被过度拉伸），可改用 minmax(min-content, 1fr)：
grid-template-rows: minmax(min-content, 1fr) 1fr; - 不兼容 IE10 及以下；如需支持旧浏览器，可降级为 JavaScript 方案（见下方精简版）：
const [b1, b2] = document.querySelectorAll('.b1, .b2'); const syncHeight = () => b1.style.height = `${b2.offsetHeight}px`; window.addEventListener('resize', syncHeight); syncHeight(); // 初始化总结：CSS Grid 是解决此类“跨元素高度联动”问题的现代、声明式首选方案。它语义清晰、维护成本低，且天然响应式——只要合理运用 fr 单位与网格轨道定义，即可优雅替代冗余脚本，提升页面性能与可读性。
立即学习“前端免费学习笔记（深入）”；