CSS Flex 布局下实现左右两栏等高边框的技巧
在使用 CSS Flex 布局时，常常需要将页面分割成上下两部分，下半部分再细分为左右两栏。如果左右两栏高度不固定，如何确保分割它们的边框能够自动延伸至最高的高度呢？本文提供两种方案解决这个问题。
场景： 页面分为上下两部分，下半部分采用 Flex 布局，左右两栏高度不确定，需要在两栏之间添加一个等高的边框。
方案一：基于现有结构的 jQuery 调整
如果无法修改HTML结构，可以采用这种方法。 首先，为右侧元素（假设为 .rht）设置 height: min-content;，使其高度根据内容自适应。然后，使用 jQuery 获取 .rht 的高度，并将其应用于左侧元素（假设为 .lft）的子元素：
立即学习“前端免费学习笔记（深入）”；
let h = $(".rht").height() + 'px';
$(".lft div").css({ height: h });
这种方法依赖于 JavaScript，需要在页面加载完成后执行。
方案二：调整 HTML 结构及 CSS 样式
这种方法更简洁高效，无需 JavaScript。通过调整 HTML 结构和 CSS 样式，可以更优雅地实现等高边框。
改进后的 HTML 结构：
顶部内容左侧内容右侧内容
对应的 CSS 样式：
* {
padding: 0;
border: 0;
margin: 0;
box-sizing: border-box; /* 建议添加，避免边框影响元素尺寸计算 */
}
.wrapper {
height: 100vh; /* 占据整个视口高度 */
display: flex;
flex-direction: column; /* 垂直方向布局 */
}
.top {
height: 100px;
background: #e3e3e3;
}
.content {
display: flex;
flex: 1; /* 占据剩余空间 */
min-height: 0; /* 防止最小高度影响布局 */
}
.lft {
flex: 1; /* 占据剩余空间 */
}
.rht {
width: 600px;
border-left: 1px solid red;
min-height: 0; /* 防止最小高度影响布局 */
}
在这个方案中：
-
.wrapper使用flex-direction: column;实现垂直布局。 -
.content使用flex: 1;占据剩余空间，确保其高度可以自适应。 -
.lft和.rht都使用min-height: 0;来防止最小高度限制其高度。 - 分割线直接在
.rht上设置border-left。
方案二通过纯 CSS 实现，性能更好，也更易于维护。 建议优先采用方案二。
