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

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

碧海醫心

发布： 2025-03-21 10:54:31

原创

518人浏览过

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

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

在使用 CSS Flex 布局时，常需将页面分割成上下两部分，下半部分又细分为左右两列。如何确保左右两列高度一致，并添加贯穿始终的分割线？本文提供两种方案。

方案一：基于现有结构，使用 JavaScript 动态调整高度

假设已存在 .lft 和 .rht 两个容器，可以使用 JavaScript 动态获取 .rht 的高度，并应用到 .lft 上。这种方法简单直接，但依赖 JavaScript，且效率可能较低。

首先，为 .rht 设置 height: min-content;，使其高度由内容撑开。然后，使用 JavaScript 代码：

let h = $(".rht").height() + 'px';
$(".lft").css({ height: h });

登录后复制

此代码片段获取 .rht 的高度，并将其应用到 .lft。

立即学习“前端免费学习笔记（深入）”；

方案二：优化 HTML 结构，利用 CSS Flex 实现等高

为了避免 JavaScript 的依赖，并提升效率，建议优化 HTML 结构，并利用 CSS Flex 的特性来实现等高布局。

示例 HTML 结构：

<div class="wrapper">
  <div class="top">导航栏</div>  <!-- 顶部导航 -->
  <div class="content">
    <div class="lft">左侧内容</div>
    <div class="rht">右侧内容</div>
  </div>
</div>

登录后复制

对应的 CSS 代码：

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

.top {
  height: 100px; /* 顶部导航高度 */
  width: 100%;
  background-color: #e3e3e3;
}

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

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

.rht {
  width: 600px;
  flex-shrink: 0; /* 防止右侧内容压缩 */
  border-left: 1px solid red; /* 分割线 */
}

登录后复制

这种方法中，wrapper 使用 flex 布局，content 容器也使用 flex 布局，并通过 flex: 1; 确保左右两列共享剩余空间，从而达到等高效果。 flex-shrink: 0; 防止 .rht 被压缩。

通过以上两种方法，可以有效解决 CSS Flex 布局中左右两列高度不一致的问题，并实现简洁美观的页面布局。建议优先考虑方案二，因为它更简洁、高效且不依赖 JavaScript。

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