Html 如何制作<；部门>；在不使用flexbox的情况下填充剩余高度？

我的html布局如下：

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

容器被赋予一个高度值，比如说

100vh

，而

child 1

有一个固定的高度。我希望

子2

自动填充剩余高度

我知道有一个flexbox解决方案：

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

该解决方案可以单独工作，但如果我希望第三个孩子

孩子3

在

孩子2

内，高度为

100%

，它将失败。我需要使

child 2

flex并将

child 3

设置为

flex-grow:1

随着嵌套的深入，这种flex继承变得非常令人沮丧。此外，它还违反了“关注点分离”，因为只有当所有节点都正确设置为

display:flex

时，DOM结构才起作用

下面是JSFIDLE演示的问题

html，
身体{
保证金：0；
}
div{
宽度：100%；
}
.集装箱{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
.child-1{
高度：50px；
弹性收缩：0；
flex-grow:0；
}
.child-2{
柔性生长：1；
}
.儿童-3{
身高：80%；
}
/*不相关的样式，如背景色等*/
.容器{
宽度：100px；
背景：绿色；
浮动：左；
右边距：20px；
}
.儿童-1.不相关{
背景：红色；
}
.儿童-2.不相关{
背景：洋红；
}
.儿童-3.不相关{
背景：黄色；
}

儿童1
孩子2
似乎很管用
儿童1
儿童2
但事实并非如此，儿童3应该占儿童2身高的80%。

将

高度：100%

添加到儿童2

您也可以使用CSS

grid

，但并非所有浏览器都支持它

html，
身体{
保证金：0；
}
div{
宽度：100%；
}
.集装箱{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
.child-1{
高度：50px；
弹性收缩：0；
flex-grow:0；
}
.child-2{
柔性生长：1；
高度：计算（100%-50px）；/*添加此行*/
}
.儿童-3{
身高：80%；
}
/*不相关的样式，如背景色等*/
.容器{
宽度：100px；
背景：绿色；
浮动：左；
右边距：20px；
}
.儿童-1.不相关{
背景：红色；
}
.儿童-2.不相关{
背景：洋红；
}
.儿童-3.不相关{
背景：黄色；
}

儿童1
孩子2
似乎很管用
儿童1
儿童2
但事实并非如此，儿童3应该占儿童2身高的80%。

将

高度：100%

添加到儿童2

您也可以使用CSS

grid

，但并非所有浏览器都支持它

html，
身体{
保证金：0；
}
div{
宽度：100%；
}
.集装箱{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
.child-1{
高度：50px；
弹性收缩：0；
flex-grow:0；
}
.child-2{
柔性生长：1；
高度：计算（100%-50px）；/*添加此行*/
}
.儿童-3{
身高：80%；
}
/*不相关的样式，如背景色等*/
.容器{
宽度：100px；
背景：绿色；
浮动：左；
右边距：20px；
}
.儿童-1.不相关{
背景：红色；
}
.儿童-2.不相关{
背景：洋红；
}
.儿童-3.不相关{
背景：黄色；
}

儿童1
孩子2
似乎很管用
儿童1
儿童2
但事实并非如此，儿童3应该占儿童2身高的80%。

哦，你可以用calc来做这个。像这样的东西

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

假设

.child-1

的固定高度为

100px

---

如果您想要更具动态性的东西，请使用@Patelapan的解决方案，但这是一种快速、简单（且不脏）的解决方案。

哦，您可以使用calc。像这样的东西

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

假设

.child-1

的固定高度为

100px

---

如果您想要更具动态性的东西，请使用@Paterarpan的解决方案，但这是一种快速、简单（且不脏）的解决方案。

似乎

.child-3

无法正确计算父母身高，除非它设置了

弹性基准。因此，您可以通过在
child-2
上使用
flex:1
或只添加
flex-basis:0%
来解决此问题，这与使用
flex:1
时浏览器将执行的操作相同


html，
身体{
保证金：0；
}
div{
宽度：100%；
}
.集装箱{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
.child-1{
弹性：1；
高度：50px；
弹性收缩：0；
flex-grow:0；
}
.child-2{
弹性：1；
}
.儿童-3{
身高：80%；
}
/*不相关的样式，如背景色等*/
.容器{
宽度：100px；
背景：绿色；
浮动：左；
右边距：20px；
}
.儿童-1.不相关{
背景：红色；
}
.儿童-2.不相关{
背景：洋红；
}
.儿童-3.不相关{
背景：黄色；
}

儿童1
孩子2
似乎很管用
儿童1
儿童2
但事实并非如此，儿童3应该占儿童2身高的80%。
似乎
.child-3
无法正确计算父母身高，除非它设置了
弹性基准。因此，您可以通过在
child-2
上使用
flex:1
或只添加
flex-basis:0%
来解决此问题，这与使用
flex:1
时浏览器将执行的操作相同


html，
身体{
保证金：0；
}
div{
宽度：100%；
}
.集装箱{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
.child-1{
弹性：1；
高度：50px；
弹性收缩：0；
flex-grow:0；
}
.child-2{
弹性：1；
}
.儿童-3{
身高：80%；
}
/*不相关的样式，如背景色等*/
.容器{
宽度：100px；
背景：绿色；
浮动：左；
右边距：20px；
}
.儿童-1.不相关{
背景：红色；
}
.儿童-2.不相关{
背景：洋红；
}
.儿童-3.不相关{
背景：黄色；
}

儿童1
孩子2似乎