點燈坊

失くすものさえない今が強くなるチャンスよ

佔據剩餘高度

Sam Xiao's Avatar 2024-06-22

實務上常遇到只有一些 column 要指定高度，但最後剩下的 column 自動佔據剩餘高度即可，可用 calc() 或 flex = 1 達成。

Version

CSS 3

calc()

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Lab</title>
  </head>
  <body>
    <main class="box">
      <div class="row1">row1</div>
      <div class="row2">row2</div>
    </main>
  </body>
  <style>
    :root {
      --row1Height: 50px;
    }

    .box {
      height: 200px;

      .row1 {
        height: var(--row1Height);
      }

      .row2 {
        height: calc(100% - var(--row1Height));
      }
    }
  </style>
</html>

Line 15

:root {
  --row1Height: 50px;
}
  • --col1Width：定義 CSS 變數

Line 19

.box {
  height: 200px;
}
  • height：設定外層高度

Line 22

.row1 {
  height: var(--row1Height);
}
  • height：使用 CSS 變數定義 row1 高度

Line 26

.row2 {
  height: calc(100% - var(--row1Height));
}
  • height：使用 calc() 計算剩餘高度

flex: 1

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Lab</title>
  </head>
  <body>
    <main class="box">
      <div class="row1">row1</div>
      <div class="row2">row2</div>
    </main>
  </body>
  <style>
    .box {
      display: flex;
      flex-flow: column;
      height: 200px;

      .row1 {
        height: 50px;
      }

      .row2 {
        flex: 1;
      }
    }
  </style>
</html>

Line 15

.box {
  display: flex;
  flex-flow: column;
  height: 200px;
}
  • display: flex：使用 flex 處理剩餘高度
  • flex-grow: column：flex 以垂直排版
  • height: 200px：設定外層高度

Line 20

.row1 {
  height: 50px;
}
  • height：直接定義 row1 高度

Line 24

.row2 {
  flex: 1;
}
  • flex: 1：相當於 flex-grow: 1，也就是將以 1 比例平分剩餘高度

Conclusion

  • calc() 算最傳統寫法，透過計算方式佔據剩餘寬度
  • flex: 1 最較新寫法，利用 flex 的 flex-grow 以 比例 方式處理剩餘寬度

# CSS