Html 如何使用flexbox填充剩余高度？

html，
身体{
身高：100%；
}
.地盘主要工程{
高度：计算（100%-72px）；
显示器：flex；
}
.site main>div{
最小宽度：85%；
身高：100%；
}
.site main>侧边{
最小宽度：15%；
身高：100%；
背景颜色：$最深的蓝灰色；
}

标题

您可以使用

正文

上的

flex-direction:column

，以及

站点主

上的

flex:1

正文{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
保证金：0；
填充：0；
}
标题{
高度：75px；
}
.地盘主要工程{
显示器：flex；
弹性：1；
}
.地盘主要分区{
弹性：0.85%；
背景：浅蓝色；
}
旁白{
弹性：0.15%；
背景：浅绿色；
}

标题

对于需要支持IE11（和10）的用户，这一版本解决了IE最小高度错误

注意，要在IE10上使用，需要添加带前缀的flexbox属性

html，正文{
保证金：0；
}
身体{
显示：-ms flexbox；/*IE 10*/
显示：flex；/*IE11/10错误修复*/
}
.包装纸{
-ms flex:1；/*IE 10*/
柔性：1；/*填充100%宽度*/
显示：-ms flexbox；/*IE 10*/
显示器：flex；
-ms柔性方向：列；/*IE 10*/
弯曲方向：立柱；
最小高度：100vh；
}
标题{
高度：72px；
}
.地盘主要工程{
-ms flex:1；/*IE 10*/
弯曲：1；/*填充100%高度*/
显示：-ms flexbox；/*IE 10*/
显示器：flex；
}
.site main>div{
宽度：85%；
背景颜色：浅绿色；
}
.site main>侧边{
宽度：15%；
背景颜色：浅蓝色；
}

标题

flexbox在哪里？你的css呢？@Troyer我想它会放在

网站主界面上。

@LeviMurray我在没有

flex

的情况下制作了这个，也许它解决了你的问题：非常相似：）非常感谢！工作得很好！