如何在CSS Flex布局中实现左右两部分等高并添加从顶到底的边框？

CSS Flex 布局：实现左右两栏等高及贯穿边框

本文探讨如何在 CSS Flex 布局中，实现页面下半部分左右两栏等高，并添加从上到下贯穿的边框。

场景描述

假设页面分为上下两部分：顶部为固定高度的导航栏，底部使用 Flex 布局，包含左右两栏，且需要左右两栏高度自适应内容并保持一致，同时在两栏之间添加一条垂直边框。

解决方法

提供两种方案：基于现有结构的调整和采用全新结构。

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

此方案需要修改 .rht 元素的样式，并使用 JavaScript 动态调整 .lft 元素的高度。

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

1. CSS 调整: 为 .rht 元素添加 height: min-content;，使其高度根据内容自适应。

   .rht {
       height: min-content;
   }

   登录后复制

2. JavaScript 调整: 使用 JavaScript 获取 .rht 元素的高度，并将其应用于 .lft 元素的子元素。

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

   登录后复制

此方法的缺点是依赖 JavaScript，且可能存在性能问题，尤其是在内容频繁变化的情况下。

方案二：利用 Flex 布局特性构建新结构

此方案通过调整 HTML 结构和 CSS 样式，直接利用 Flex 布局特性实现等高和边框。

HTML 结构:

<div class="wrapper">
  <div class="top">导航栏</div>
  <div class="content">
    <div class="lft">
      <div>左栏内容</div>
    </div>
    <div class="rht">
      <div>右栏内容</div>
    </div>
  </div>
</div>

CSS 样式:

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

.top {
  height: 100px; /* 导航栏高度 */
  background-color: #eee;
}

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

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

.rht {
  width: 300px; /* 右栏宽度 */
  border-left: 1px solid red; /* 垂直边框 */
}

此方案中，.content 使用 flex: 1; 占据剩余空间，.lft 和 .rht 使用 flex: 1; 和 width 属性控制比例和宽度，实现左右两栏等高。垂直边框直接通过 .rht 的 border-left 属性添加。 这种方法更简洁高效，无需 JavaScript 干预。

通过以上两种方案，可以有效地实现 CSS Flex 布局中左右两部分等高，并添加贯穿的边框。 推荐使用方案二，因为它更简洁、高效且更符合 Flex 布局的设计理念。

以上就是如何在CSS Flex布局中实现左右两部分等高并添加从顶到底的边框？的详细内容，更多请关注php中文网其它相关文章！