css flex 布局：實現左右等高并自動延伸邊框
網頁布局中，常需將頁面分成上下兩部分，下半部分再細分為左右兩欄，且要求左右兩欄高度一致，并以邊框分隔，邊框隨內容高度自動延伸。本文介紹兩種使用 CSS Flex 布局實現此效果的方法。
方法一：基于現有結構，結合 JavaScript
對于現有頁面結構，我們可以通過設置 height: min-content; 來讓 .rht 和 .lft 容器根據內容高度自動調整。但為了確保左右兩欄高度完全一致，需要使用 JavaScript 獲取 .rht 的高度，并將其應用于 .lft 的子元素。
let h = $(".rht").height() + 'px'; $(".lft div").css({ height: h });
此方法雖然有效，但依賴 JavaScript，且維護性可能較低。
立即學習“前端免費學習筆記（深入）”；
方法二：優化 html 結構，純 CSS 實現
通過調整 HTML 結構，我們可以僅使用 CSS 實現更簡潔優雅的解決方案。以下是一個示例：
<div class="wrapper"> <div class="top">nav</div> <div class="content"> <div class="lft"> <div>lft content</div> </div> <div class="rht"> <div>rht content 1</div> <div>rht content 2</div> <div>rht content 3</div> </div> </div> </div>
* { padding: 0; border: 0; margin: 0; box-sizing: border-box; /* 重要：避免邊框影響元素大小計算 */ } .wrapper { display: flex; flex-direction: column; /* 上下布局 */ height: 100vh; /* 占據整個視口高度 */ } .top { height: 100px; background: #e3e3e3; } .content { display: flex; flex: 1; /* 占據剩余空間 */ } .lft { flex: 1; /* 占據剩余空間 */ } .rht { width: 600px; border-left: 1px solid red; background: red; }
在這個例子中：
- display: flex; 和 flex: 1; 用于創建左右等高的 flex 布局。
- box-sizing: border-box; 確保邊框包含在元素寬度內，避免計算錯誤。
- .rht 的 width 設置固定寬度，.lft 則自動占據剩余空間。
- height: 100vh; 確保整體布局占據整個視口高度。
方法二避免了 JavaScript 的使用，代碼更簡潔，且維護性更好。 選擇哪種方法取決于你的項目需求和現有代碼結構。 如果可以修改 HTML 結構，強烈推薦方法二。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
