CSS Flex 布局：实现左右两栏等高及贯穿边框
本文探讨如何在 CSS Flex 布局中，实现页面下半部分左右两栏等高，并添加从上到下贯穿的边框。
场景描述
假设页面分为上下两部分：顶部为固定高度的导航栏，底部使用 Flex 布局，包含左右两栏，且需要左右两栏高度自适应内容并保持一致，同时在两栏之间添加一条垂直边框。
解决方法
提供两种方案：基于现有结构的调整和采用全新结构。
方案一：基于现有结构的 JavaScript 调整
此方案需要修改 .rht 元素的样式，并使用 JavaScript 动态调整 .lft 元素的高度。
立即学习“前端免费学习笔记（深入）”；
-
CSS 调整: 为
.rht元素添加height: min-content;，使其高度根据内容自适应。.rht { height: min-content; } -
JavaScript 调整: 使用 JavaScript 获取
.rht元素的高度，并将其应用于.lft元素的子元素。let h = $(".rht").height() + 'px'; $(".lft div").css({ height: h });
此方法的缺点是依赖 JavaScript，且可能存在性能问题，尤其是在内容频繁变化的情况下。
方案二：利用 Flex 布局特性构建新结构
此方案通过调整 HTML 结构和 CSS 样式，直接利用 Flex 布局特性实现等高和边框。
HTML 结构:
导航栏左栏内容右栏内容
CSS 样式:
.wrapper {
display: flex;
flex-direction: column;
height: 100vh; /* 占据整个视口高度 */
}
.top {
height: 100px; /* 导航栏高度 */
background-color: #eee;
}
.content {
display: flex;
flex: 1; /* 占据剩余空间 */
}
.lft {
flex: 1; /* 占据剩余空间 */
}
.rht {
width: 300px; /* 右栏宽度 */
border-left: 1px solid red; /* 垂直边框 */
}
此方案中，.content 使用 flex: 1; 占据剩余空间，.lft 和 .rht 使用 flex: 1; 和 width 属性控制比例和宽度，实现左右两栏等高。垂直边框直接通过 .rht 的 border-left 属性添加。 这种方法更简洁高效，无需 JavaScript 干预。
通过以上两种方案，可以有效地实现 CSS Flex 布局中左右两部分等高，并添加贯穿的边框。 推荐使用方案二，因为它更简洁、高效且更符合 Flex 布局的设计理念。
