css flex 布局：实现左右等高并自动延伸边框
网页布局中，常需将页面分成上下两部分，下半部分再细分为左右两栏，且要求左右两栏高度一致，并以边框分隔，边框随内容高度自动延伸。本文介绍两种使用 CSS Flex 布局实现此效果的方法。
方法一：基于现有结构，结合 JavaScript
对于现有页面结构，我们可以通过设置 height: min-content; 来让 .rht 和 .lft 容器根据内容高度自动调整。但为了确保左右两栏高度完全一致，需要使用 JavaScript 获取 .rht 的高度，并将其应用于 .lft 的子元素。
let h = $(".rht").height() + 'px'; $(".lft div").css({ height: h });
此方法虽然有效，但依赖 JavaScript，且维护性可能较低。
立即学习“前端免费学习笔记（深入）”；
方法二：优化 html 结构，纯 CSS 实现
通过调整 HTML 结构，我们可以仅使用 CSS 实现更简洁优雅的解决方案。以下是一个示例：
<div class="wrapper"> <div class="top">nav</div> <div class="content"> <div class="lft"> <div>lft content</div> </div> <div class="rht"> <div>rht content 1</div> <div>rht content 2</div> <div>rht content 3</div> </div> </div> </div>
* { padding: 0; border: 0; margin: 0; box-sizing: border-box; /* 重要：避免边框影响元素大小计算 */ } .wrapper { display: flex; flex-direction: column; /* 上下布局 */ height: 100vh; /* 占据整个视口高度 */ } .top { height: 100px; background: #e3e3e3; } .content { display: flex; flex: 1; /* 占据剩余空间 */ } .lft { flex: 1; /* 占据剩余空间 */ } .rht { width: 600px; border-left: 1px solid red; background: red; }
在这个例子中：
- display: flex; 和 flex: 1; 用于创建左右等高的 flex 布局。
- box-sizing: border-box; 确保边框包含在元素宽度内，避免计算错误。
- .rht 的 width 设置固定宽度，.lft 则自动占据剩余空间。
- height: 100vh; 确保整体布局占据整个视口高度。
方法二避免了 JavaScript 的使用，代码更简洁，且维护性更好。 选择哪种方法取决于你的项目需求和现有代码结构。 如果可以修改 HTML 结构，强烈推荐方法二。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
