如何使用 CSS Flex 布局实现左右同高并自动延伸边框？-css教程-PHP中文网

如何使用 CSS Flex 布局实现左右同高并自动延伸边框？

花韻仙語

发布： 2025-03-18 08:40:01

原创

1072人浏览过

如何使用 css flex 布局实现左右同高并自动延伸边框？

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;
}

登录后复制

在这个例子中：