如何僅使用 CSS 用 Div 填滿剩餘的垂直空間？

僅使用CSS 用#second 響應式填充垂直空間

問題：

如何我們僅使用#wrapper 填入#first 下的剩餘垂直空間CSS？

解決方案：

為了實現這一點，我們可以利用Flexbox 屬性CSS:

<code class="css">html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}</code>

HTML:

<code class="html"><div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div></code>

說明:

1. 將高度設定為100%讓html 和body 佔據整個高度viewport。
2. 建立一個父容器.wrapper，其顯示為：flex。
3. 設定flex-direction：column，垂直排列子元素。
4. 為.first指定固定高度決定其大小。
5. 在 .second 上使用 flex-grow: 1 使其能夠擴展並填充剩餘的垂直方向空間。

以上是如何僅使用 CSS 用 Div 填滿剩餘的垂直空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！