如何在不絕對定位的情況下讓div佔據剩餘的父高度？-css教學-PHP中文網

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

Linda Hamilton

發布： 2024-12-06 15:12:18

原創

896 人瀏覽過

How to Make a Div Occupy Remaining Parent Height Without Absolute Positioning?

在沒有絕對定位的情況下讓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%;
}

登入後複製

注意:

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