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 结构，强烈推荐方法二。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
