如何讓 Div 子容器填滿其父容器的剩餘空間？

擴充div 高度以佔據剩餘的父容器空間

讓div 子元素佔據其父容器的剩餘空間是一個常見的任務沒有明確設定其高度。以下是實現此目的的幾種方法：

1.網格佈局

.container {
  display: grid;
  grid-template-rows: 100px;
}

此方法建立一個具有一行 100px 高度的網格佈局。子 div 將填滿剩餘空間。

2. Flexbox

.container {
  display: flex;
  flex-direction: column;
}

.container .down {
  flex-grow: 1;
}

Flexbox 允許將子 div 設定為 1，使其擴展以填滿剩餘的垂直空間。

3.高度計算

.up {
  height: 100px;
}

.down {
  height: calc(100% - 100px);
}

此方法使用CSS 高度計算，從100% 減去第一個孩子的高度，得到第二個孩子的剩餘高度。

4 。隱藏溢位

.container {
  overflow: hidden;
}

.down {
  height: 100%;
}

透過隱藏溢位來覆寫預設顯示行為允許子 div 填滿父級的高度。

5. Max-Content

.container {
  height: 100%;
}

.down {
  height: max-content;
}

Max-content 屬性值依其內容調整子 div 的大小，有效地佔用剩餘空間。

請注意，某些方法可能有限製或瀏覽器支援限制。根據您的特定要求選擇合適的方法。

以上是如何讓 Div 子容器填滿其父容器的剩餘空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！