如何讓子div佔據其父div的剩餘高度？

如何讓Div 佔據父級的剩餘高度

考慮以下HTML 和CSS 程式碼：

<div>
<pre class="brush:php;toolbar:false">#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

這裡，我們有一個帶有兩個子元素的容器div。第一個子項 (#up) 具有給定高度，而第二個子項 (#down) 則沒有。如何讓#down佔據容器div的剩餘高度？

解決方案

有幾種方法可以實現這一點，取決於瀏覽器相容性以及#up是否有固定的高度。

選項：

1。網格版面：

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

2.彈性盒版面：

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

3.運算高度：

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

4。溢位隱藏：

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

方法的選擇取決於特定要求和瀏覽器支援。請注意，CSS 現在包含用於調整大小的 max-content 屬性值，這可能適合某些場景。