CSS Flex 左右布局同高度边框实现技巧

本文介绍了使用CSS Flex布局实现左右两栏等高边框的两种方案。方案一使用jQuery动态调整元素高度，依赖JavaScript，适用于无法修改HTML结构的情况。方案二则通过调整HTML结构和CSS样式，利用`flex: 1`和`min-height: 0`等属性，实现纯CSS的等高边框效果，性能更佳，更易维护，推荐优先采用。 文章详细阐述了两种方案的实现步骤及代码示例，帮助开发者解决CSS Flex布局下左右两栏等高边框的难题。

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 实现，性能更好，也更易于维护。 建议优先采用方案二。

到这里，我们也就讲完了《CSS Flex 左右布局同高度边框实现技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！