如何讓子項的高度自動均分於父項的高度

這個問題一般出現在比較複雜的版面,例如左右兩欄,左欄是選單,右欄由多種元素組成,可能是 Banner、圖加文的文章或是多種複合元素組成,由於內容長短不一定,直接造成左右兩欄的高度無法限制在一個範圍內,但有時為了版面的整齊,我們會希望左右兩欄的底部可以對齊,這時我們該怎麼辦呢?

案例 HTML

<div class="container">
  <ul class="side_menu">
    <li class="items">menu 1</li>
    <li class="items">menu 2</li>
    <li class="items">menu 3</li>
    <li class="items">menu 4</li>
    <li class="items">menu 5</li>
  </ul>
  <main>
    高度不確定的複合元素 (如:Banner、圖加文的文章)
  </main>
</div>

案例 CSS

.container{
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1em;
  width: 1200px;
}

由於右側 <main> 包覆的內容高度無法確定,以至於我們無法通過計算得到左側 .items 的高度。更甚者,連左側 .items 的數量也是動態增減。

遇到這種情況時我們只需要將父項 ul 的 display 設為 flex,flex-direction 設為 column,接著將子項 li 的高度設為 100%。這樣子不只是右側 <main> 的高度可以自由設定,<ul class="side_menu"> 會自動適配右側內容的高度並均分 <li class="items"> 的高度,連左側的 <ul class="side_menu"> 裡面的 <li> 也可以任意增減,十分有彈性,範例如下:

修改過的 CSS

ul.side_menu{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
li.items{
  height: 100%;
}

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

回到頂端