讓最后一個div的高度自動填滿瀏覽器窗口剩余部分

讓最后一個元素占滿當前視口的剩余空間，縮放瀏覽器窗口也沒影響。

HTML

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>

CSS

html,body {
  height: 100%;
  margin: 0;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container > div:last-child {
  background-color: tomato;
  flex: 1;
}

代碼說明

1. height: 100% 將容器高度設置為視口高度。

2. display: flex 啟用flexbox布局。

3. flex-direction 設置flex條目的方向為從頂部到底部。

4. 設置最后一個元素的 flex-grow: 1 使其可以占滿容器的剩余可用空間。

5. 父元素必須有視口高度。flex-grow: 1 也可以作用於第一個或第二個元素。