怎么做 <div> 填充剩余高度而不使用flexbox？

Question

我有這樣的html布局：

,-------------.
|,-----------.|
|| child 1   ||
|`-----------'|
|,-----------.|
|| child 2   ||
||           ||
||           ||
||           ||
||           ||
|`-----------'|
`-------------'

給容器一個高度值，例如100vh ， child 1具有固定的高度。 我希望child 2自動填充剩余的身高。

我知道有一個flexbox解決方案：

.container { 
    display: flex;
    flex-direction: column;
}
.child-1 {
    flex-shrink: 0;
    flex-grow: 0;
}
.child-2 {
    flex-grow: 1;
}

該解決方案可以單獨使用，但是如果我要在child 2內的第三個child 3的height: 100% ，則它會失敗。 我需要讓child 2彎曲並將child 3設置為flex-grow: 1 。

隨着嵌套的深入，這種靈活的繼承變得非常令人沮喪。 而且它違反了“關注分離”，因為DOM結構僅在將所有節點正確設置為display: flex時才起作用display: flex 。

下面是jsfiddle演示的問題。

 html, body { margin: 0; } div { width: 100%; } .container { height: 100vh; display: flex; flex-direction: column; } .child-1 { height: 50px; flex-shrink: 0; flex-grow: 0; } .child-2 { flex-grow: 1; } .child-3 { height: 80%; } /* irrelevant styles like background-color etc. */ .container.irrelevant { width: 100px; background: green; float: left; margin-right: 20px; } .child-1.irrelevant { background: red; } .child-2.irrelevant { background: magenta; } .child-3.irrelevant { background: yellow; } 

 <div class="container irrelevant"> <div class="child-1 irrelevant"> Child 1 </div> <div class="child-2 irrelevant"> Child 2<br> Seems like it works </div> </div> <div class="container irrelevant"> <div class="child-1 irrelevant"> Child 1 </div> <div class="child-2 irrelevant"> Child 2 <div class="child-3 irrelevant"> But it doesn't, child 3 should fill 80% height of the child 2. </div> </div> </div> 

Answer 1

哦，您可以為此使用calc。 像這樣的東西；

.child-2 { height: calc(100vh - 100px); }

假設.child-1的固定高度為100px 。

如果您想要更多動態的東西，請使用@patelarpan的解決方案，但這是快速且容易的（並且不會弄臟）。

Answer 2

增加height: 100%兒童2的height: 100%

您也可以使用CSS grid但並非所有瀏覽器都支持。

 html, body { margin: 0; } div { width: 100%; } .container { height: 100vh; display: flex; flex-direction: column; } .child-1 { height: 50px; flex-shrink: 0; flex-grow: 0; } .child-2 { flex-grow: 1; height: calc(100% - 50px); /* add this line */ } .child-3 { height: 80%; } /* irrelevant styles like background-color etc. */ .container.irrelevant { width: 100px; background: green; float: left; margin-right: 20px; } .child-1.irrelevant { background: red; } .child-2.irrelevant { background: magenta; } .child-3.irrelevant { background: yellow; } 

 <div class="container irrelevant"> <div class="child-1 irrelevant"> Child 1 </div> <div class="child-2 irrelevant"> Child 2<br> Seems like it works </div> </div> <div class="container irrelevant"> <div class="child-1 irrelevant"> Child 1 </div> <div class="child-2 irrelevant"> Child 2 <div class="child-3 irrelevant"> But it doesn't, child 3 should fill 80% height of the child 2. </div> </div> </div> 

Answer 3

除非.child-3設置了flex-basis否則似乎無法正確計算父母的身高。 所以，你可以通過使用解決這個問題flex: 1的child-2 DEMO或只需添加flex-basis: 0% DEMO這是同樣的事情，如果你使用的瀏覽器會做flex: 1 。

 html, body { margin: 0; } div { width: 100%; } .container { height: 100vh; display: flex; flex-direction: column; } .child-1 { flex: 1; height: 50px; flex-shrink: 0; flex-grow: 0; } .child-2 { flex: 1; } .child-3 { height: 80%; } /* irrelevant styles like background-color etc. */ .container.irrelevant { width: 100px; background: green; float: left; margin-right: 20px; } .child-1.irrelevant { background: red; } .child-2.irrelevant { background: magenta; } .child-3.irrelevant { background: yellow; } 

 <div class="container irrelevant"> <div class="child-1 irrelevant"> Child 1 </div> <div class="child-2 irrelevant"> Child 2<br> Seems like it works </div> </div> <div class="container irrelevant"> <div class="child-1 irrelevant"> Child 1 </div> <div class="child-2 irrelevant"> Child 2 <div class="child-3 irrelevant"> But it doesn't, child 3 should fill 80% height of the child 2. </div> </div> </div>