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

css flex 布局：實現左右等高布局

本文探討如何使用 CSS Flex 布局實現左右兩欄布局，并確保兩欄高度一致。 常見的場景是頁面分為上下兩部分，下半部分再分為左右兩欄，且左右欄內容高度不一致，需要一個垂直邊框貫穿始終。

問題：左右欄高度不一致

現有頁面布局通常將頁面分為上下兩部分，下半部分使用 flex: 1; 撐滿剩余空間，并設置 overflow-y: auto; 允許滾動。下半部分的左右兩欄高度不確定，需要確保兩欄高度一致，并用邊框分隔。

方法一：基于現有結構的調整

如果現有結構難以更改，可嘗試以下方法：

1. 設置最小內容高度： 為左右兩欄容器（例如 .rht 和 .lft）添加 height: min-content; 屬性，允許容器根據內容高度自動調整。

   立即學習“前端免費學習筆記（深入）”；

2. JavaScript 動態調整： 使用 JavaScript (例如 jquery) 獲取 .rht 的高度，并將其應用于 .lft 容器，強制兩欄高度一致。 例如：

   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; 可以更方便地控制元素的尺寸，包含內邊距和邊框。