Html Flexgrid圣杯，100%高度

我在“圣杯”布局上做了一个调整，您会注意到，

#main

有一个

最小高度：800px

。我真正想要的是100%的高度，然后当我在

部分中添加内容时，布局的其余部分继续向下（就像现在一样）

你知道如何做到这一点吗，100%的高度，而不是明确设置800px


正文{
字体：24px Helvetica；
背景#999999；
保证金：0；
填充：0；
身高：100%；
}
#主要{
最小高度：800px；
保证金：0；
填充：0；
显示器：flex；
柔性流：行；
}
#主要>文章{
边框：1px实心#CC33；
背景:#dd88；
弹性：31 60%；
顺序：3；
}
#主>导航{
边框：1px实心#8888bb；
背景：#ccccff；
flex:1670px；
顺序：1；
最大宽度：70像素；
最小宽度：70px；
}
#主>旁边{
边框：1px实心#8888bb；
背景：#ccccff；
flex:1600px；
顺序：2；
最大宽度：300px；
最小宽度：300px；
}
标题{
显示：块；
填充物：5px；
最小高度：70px；
边框：1px实心#eebb55；
背景:#ffeebb ;；
}
部分{
利润率：10px；
}
.集装箱{
保证金：0；
填充：0；
显示器：flex；
柔性流：行；
}
.container>.field{
宽度：100%；
背景:#dd88；
顺序：2；
}
.container>.left{
宽度：4px；
背景：黑色；
顺序：1；
}
.container>。对{
宽度：4px；
背景：黑色；
顺序：3；
显示器：flex；
}
顶部
.底部{
显示：块；
高度：4px；
背景：红色；
}

标题
带边框的子集装箱
导航
在一边
如果希望元素占据100%的视口高度，并且可以选择展开以容纳其他内容，请使用
最小高度：100vh
（）

由于以下文章中解释的原因，百分比高度不如视口百分比高度有效且易于使用




那么
最小高度：100vh
呢？我不明白这个问题。你能编辑你的问题并添加更多的解释吗？100%的高度是什么@Michael_B走在正确的轨道上。使用百分比很难达到100%的高度-它的行为方式与您预期的不同。@Michael_B-100vh似乎工作得很好。。。你想回答这个问题吗？非常感谢。