如何使用 CSS 用第二個 Div 填滿包裝 Div 中的剩餘垂直空間？

使用CSS 填滿垂直空間

問題：

您有一個包含#first 的#wrapper div 的佈局和#第二個div。您需要用#second 來填滿#first 下面#wrapper 的剩餘垂直空間，只使用CSS。

解決方案：

1. Flexbox版面：

   • 設定包裝器顯示🎜 ：flex和flex-direction：column。這將設定垂直佈局。
   • 將包裝器的高度設定為 100%。

2. 高度控制：

   • 將第一個div 的高度設定為固定值（例如50px），以確保其不會擴展。

3. Flex- Grow 屬性：

   • 第二個 div 上使用 flex-grow 屬性。此屬性允許第二個 div 垂直擴展並填充剩餘空間。將 flex-grow 設為 1 以使其靈活。

程式碼範例：

<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>

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