如何使用 CSS Flex 實現(xiàn)左右布局的同高度邊框？

css flex 布局下實現(xiàn)左右兩欄等高邊框的技巧

在使用 CSS Flex 布局時，常常需要將頁面分割成上下兩部分，下半部分再細(xì)分為左右兩欄。如果左右兩欄高度不固定，如何確保分割它們的邊框能夠自動延伸至最高的高度呢？本文提供兩種方案解決這個問題。

場景： 頁面分為上下兩部分，下半部分采用 Flex 布局，左右兩欄高度不確定，需要在兩欄之間添加一個等高的邊框。

方案一：基于現(xiàn)有結(jié)構(gòu)的 jquery 調(diào)整

如果無法修改html結(jié)構(gòu)，可以采用這種方法。 首先，為右側(cè)元素（假設(shè)為 .rht）設(shè)置 height: min-content;，使其高度根據(jù)內(nèi)容自適應(yīng)。然后，使用 jQuery 獲取 .rht 的高度，并將其應(yīng)用于左側(cè)元素（假設(shè)為 .lft）的子元素：

立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；

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

這種方法依賴于 JavaScript，需要在頁面加載完成后執(zhí)行。

方案二：調(diào)整 HTML 結(jié)構(gòu)及 CSS 樣式

這種方法更簡潔高效，無需 JavaScript。通過調(diào)整 HTML 結(jié)構(gòu)和 CSS 樣式，可以更優(yōu)雅地實現(xiàn)等高邊框。

改進(jìn)后的 HTML 結(jié)構(gòu)：

<div class="wrapper">   <div class="top">頂部內(nèi)容</div>  <!-- 頂部區(qū)域 -->   <div class="content">  <!-- Flex 布局容器 -->     <div class="lft">       <div>左側(cè)內(nèi)容</div>     </div>     <div class="rht">       <div>右側(cè)內(nèi)容</div>     </div>   </div> </div>

對應(yīng)的 CSS 樣式：

* {   padding: 0;   border: 0;   margin: 0;   box-sizing: border-box; /*  建議添加，避免邊框影響元素尺寸計算 */ }  .wrapper {   height: 100vh; /* 占據(jù)整個視口高度 */   display: flex;   flex-direction: column; /*  垂直方向布局 */ }  .top {   height: 100px;   background: #e3e3e3; }  .content {   display: flex;   flex: 1; /*  占據(jù)剩余空間 */   min-height: 0; /*  防止最小高度影響布局 */ }  .lft {   flex: 1; /*  占據(jù)剩余空間 */ }  .rht {   width: 600px;   border-left: 1px solid red;   min-height: 0; /*  防止最小高度影響布局 */ }

在這個方案中：

• .wrapper 使用 flex-direction: column; 實現(xiàn)垂直布局。
• .content 使用 flex: 1; 占據(jù)剩余空間，確保其高度可以自適應(yīng)。
• .lft 和 .rht 都使用 min-height: 0; 來防止最小高度限制其高度。
• 分割線直接在 .rht 上設(shè)置 border-left。

方案二通過純 CSS 實現(xiàn)，性能更好，也更易于維護(hù)。 建議優(yōu)先采用方案二。