如何使用CSS Flex实现左右布局并保持同高？-css教程-PHP中文网

如何使用CSS Flex实现左右布局并保持同高？

碧海醫心

发布： 2025-03-20 11:08:37

原创

449人浏览过

如何使用css flex实现左右布局并保持同高？

CSS Flex 布局：实现左右等高布局

本文探讨如何使用 CSS Flex 布局实现左右两栏布局，并确保两栏高度一致。常见的场景是页面分为上下两部分，下半部分再分为左右两栏，且左右栏内容高度不一致，需要一个垂直边框贯穿始终。

问题：左右栏高度不一致

现有页面布局通常将页面分为上下两部分，下半部分使用 flex: 1; 撑满剩余空间，并设置 overflow-y: auto; 允许滚动。下半部分的左右两栏高度不确定，需要确保两栏高度一致，并用边框分隔。

方法一：基于现有结构的调整

如果现有结构难以更改，可尝试以下方法：

设置最小内容高度： 为左右两栏容器（例如 .rht 和 .lft）添加 height: min-content; 属性，允许容器根据内容高度自动调整。

立即学习“前端免费学习笔记（深入）”；
JavaScript 动态调整： 使用 JavaScript (例如 jQuery) 获取 .rht 的高度，并将其应用于 .lft 容器，强制两栏高度一致。例如：

如知AI笔记
如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

27

查看详情
```
let h = $(".rht").height() + 'px';
$(".lft").css({ height: h });
```
登录后复制

这种方法依赖 JavaScript，可能会影响性能，且需要维护额外的 JavaScript 代码。

方法二：优化布局结构

最佳方案是优化 HTML 结构，利用 Flexbox 的特性直接实现等高布局：

<div class="wrapper">
  <div class="top">顶部内容</div>  <!-- 顶部区域 -->
  <div class="content"> <!-- 使用Flex布局 -->
    <div class="lft">左边内容</div>
    <div class="rht">右边内容</div>
  </div>
</div>

登录后复制

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /*  建议使用box-sizing: border-box;  */
}

.wrapper {
  display: flex;
  flex-direction: column; /* 垂直布局 */
  height: 100vh; /* 占据整个视口高度 */
}

.top {
  height: 100px;
  background-color: #e3e3e3;
}

.content {
  display: flex;
  flex: 1; /* 占据剩余空间 */
}

.lft {
  flex: 1; /* 占据剩余空间 */
}

.rht {
  width: 600px;
  border-left: 1px solid red; /* 分隔线 */
  background-color: red;
}

登录后复制

在这个结构中：

.wrapper 使用 Flexbox 的 flex-direction: column; 实现垂直布局。
.content 使用 Flexbox，flex: 1; 使其占据剩余空间。
.lft 使用 flex: 1; 确保其与 .rht 等高。

通过此方法，无需 JavaScript 干预，即可实现左右两栏等高，且边框自动延伸到底部。这种方法更简洁高效，也更易于维护。记住设置 box-sizing: border-box; 可以更方便地控制元素的尺寸，包含内边距和边框。

以上就是如何使用CSS Flex实现左右布局并保持同高？的详细内容，更多请关注php中文网其它相关文章！