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 结构：
<div class="wrapper"> <div class="top">顶部内容</div> <!-- 顶部区域 --> <div class="content"> <!-- Flex 布局容器 --> <div class="lft"> <div>左侧内容</div> </div> <div class="rht"> <div>右侧内容</div> </div> </div> </div>
对应的 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 实现，性能更好，也更易于维护。 建议优先采用方案二。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
