如何使用 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。