如何使用 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 實現左右佈局的同高度邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！