以下是一些適合您文章內容和風格的標題選項： 選項 1（直接且清晰）： * 如何使用 Flexbox 指派剩餘垂直空間 選項 2（問題格式）： * 想要

使用Flexbox 和剩餘垂直空間實現理想的高度分佈

Flexbox 提供了一種優雅且高效的CSS 解決方案，用於填滿剩餘垂直空間容器元素。在這種情況下，我們的目標是在 #wrapper 容器內分配 #first 和 #second div 之間的高度，確保 #second 佔據剩餘空間。

所採用的解決方案利用以下 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>

在 #wrapper div 中，我們建立了一個垂直方向的 Flexbox 佈局。這允許兩個 div，#first 和 #second，垂直對齊。 #wrapper 的高度設定為 100%，確保它佔據視口的整個高度。

為了指定 #first 的高度，我們指派固定值 50px。對於#second，我們利用 flex-grow 屬性來控制其高度。透過將 flex-grow 設為 1，我們指示 #second 應該擴展以填充 #wrapper 容器內的任何剩餘空間。

因此，#first 佔據 50px 的固定高度，而 #second 則動態調整它的高度填充剩餘的垂直空間。這可確保佈局適應不同的螢幕尺寸和裝置方向。

以上是以下是一些適合您文章內容和風格的標題選項： 選項 1（直接且清晰）： * 如何使用 Flexbox 指派剩餘垂直空間 選項 2（問題格式）： * 想要的詳細內容。更多資訊請關注PHP中文網其他相關文章！