使用 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;
}OneDIV B Lorem Ipsum is simply dummy text of the printing and typesetting industry...
✅ 核心原理：1fr 表示“剩余空间的 1 份”，1fr 1fr 即将容器总高度平均分为两份，两个子元素各自占据一份——无论内容多少，Grid 自动拉伸二者填满分配的高度。当窗口缩放或文字换行导致 .b2 内容高度变化时，Grid 重新计算轨道尺寸，.b1 同步响应，视觉上始终等高。
⚠️ 注意事项：
高端网络建设公司设计类网站模板 IT互联网移动建站类网站源码(带手机版数据同步)本套模板采用现在非常流行的全屏自适应布局设计，且栏目列表以简洁，非常时尚大气。后台支持可视拖拽编辑。 模板特点：1、手工书写DIV+CSS、代码精简无冗余。2、自适应结构，全球先进技术，高端视觉体验。3、SEO框架布局，栏目及文章页均可独立设置标题/关键词/描述。4、后台直接修改联系方式、传真、邮箱、地址等，修改更加方
- 此方案要求父容器（.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 单位与网格轨道定义，即可优雅替代冗余脚本，提升页面性能与可读性。
立即学习“前端免费学习笔记（深入）”；
