如何在不絕對定位的情況下讓div佔據剩餘的父高度？

在沒有絕對定位的情況下讓Div 佔用剩餘父高度

在HTML/CSS 中，經常會遇到子div 需要佔用的場景其父容器的剩餘高度，無需明確設定特定高度。讓我們深入研究這個問題及其可能的解決方案。

考慮以下 HTML/CSS 程式碼：

<div>

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

這裡，“down”div 應該佔據“”下面的空白向上” div.

解決方案

有以下幾種方法實現這個：

網格：

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

Flexbox ：

.container {
  display: flex;
  flex-direction: column;
}
.container .down {
  flex-grow: 1;
}

計算化:

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

溢出:

.container {
  overflow: hidden;
}
.container .down {
  height: 100%;
}

注意:

• 對於在支持CSS Grid 和Flexbox 的瀏覽器中，這些解決方案提供了更優雅的方法。行為。

以上是如何在不絕對定位的情況下讓div佔據剩餘的父高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！