CSS Flex 布局：实现左右等高布局
本文探讨如何使用 CSS Flex 布局实现左右两栏布局，并确保两栏高度一致。 常见的场景是页面分为上下两部分，下半部分再分为左右两栏，且左右栏内容高度不一致，需要一个垂直边框贯穿始终。
问题：左右栏高度不一致
现有页面布局通常将页面分为上下两部分，下半部分使用 flex: 1; 撑满剩余空间，并设置 overflow-y: auto; 允许滚动。下半部分的左右两栏高度不确定，需要确保两栏高度一致，并用边框分隔。
方法一：基于现有结构的调整
如果现有结构难以更改，可尝试以下方法：
-
设置最小内容高度： 为左右两栏容器（例如
.rht和.lft）添加height: min-content;属性，允许容器根据内容高度自动调整。立即学习“前端免费学习笔记（深入）”；
-
JavaScript 动态调整： 使用 JavaScript (例如 jQuery) 获取
.rht的高度，并将其应用于.lft容器，强制两栏高度一致。 例如：let h = $(".rht").height() + 'px'; $(".lft").css({ height: h });
这种方法依赖 JavaScript，可能会影响性能，且需要维护额外的 JavaScript 代码。
方法二：优化布局结构
最佳方案是优化 HTML 结构，利用 Flexbox 的特性直接实现等高布局：
顶部内容左边内容右边内容
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* 建议使用box-sizing: border-box; */
}
.wrapper {
display: flex;
flex-direction: column; /* 垂直布局 */
height: 100vh; /* 占据整个视口高度 */
}
.top {
height: 100px;
background-color: #e3e3e3;
}
.content {
display: flex;
flex: 1; /* 占据剩余空间 */
}
.lft {
flex: 1; /* 占据剩余空间 */
}
.rht {
width: 600px;
border-left: 1px solid red; /* 分隔线 */
background-color: red;
}
在这个结构中：
-
.wrapper使用 Flexbox 的flex-direction: column;实现垂直布局。 -
.content使用 Flexbox，flex: 1;使其占据剩余空间。 -
.lft使用flex: 1;确保其与.rht等高。
通过此方法，无需 JavaScript 干预，即可实现左右两栏等高，且边框自动延伸到底部。 这种方法更简洁高效，也更易于维护。 记住设置 box-sizing: border-box; 可以更方便地控制元素的尺寸，包含内边距和边框。
