Html 使内容最小高度充满屏幕

举个例子，我做了一把小提琴：

如何使div

.container

最小限度地填充屏幕？ 因此，当几乎没有内容时，它仍然会填满屏幕

它适用于当收银台购物车为空时显示的页面。内容太薄，因此屏幕上没有完全填满内容

---

另外，我不是在寻找一个假设页眉或页脚具有静态高度的答案。我希望能够在页眉或页脚高度可变的情况下使用它

另外，我也喜欢CSS解决方案，因此没有JavaScript或jQuery，您可以使用

calc（）

并设置

100vh-页眉高度

，还可以添加

框大小：边框框

，以保持内部填充

*{
框大小：边框框；
}
身体，
html{
保证金：0；
填充：0；
}
标题{
高度：200px；
背景颜色：蓝色；
宽度：100%；
}
.集装箱{
填充：50px；
最小高度：计算（100vh-200px）；
}
页脚{
宽度：100%；
高度：200px；
背景色：#333；
}

小文本

试试这个

min-height: calc(100vh - 400px);

---

这是小提琴

我知道，但问题是，页眉的高度是可变的：/页脚也是一样flexbox解决方案导致页面宽度变小，应该这样吗？我不能分享屏幕截图，因为我在一家公司实习。我的意思是，从字面上看，页面只是缩小了。可能是因为您的页面上没有实现边框框。它告诉浏览器包括所有元素的高度/宽度的所有填充和边框。

：）

你能用小提琴重现这个问题吗我不知道为什么会这样，是的，它可能是

边框框

。我的问题是，如果答案是基于页眉和/或页脚具有静态高度这一事实，我不会寻找解决方案。这是唯一的方法吗？：/我希望有一个CSS解决方案，这几乎是另一个人给我的解决方案。同样的问题在这里，网页字面上缩小实际上我们没有确切的代码或你的项目的实时链接。。所以我们试着为你的小提琴提供解决方案。就像我说的，很遗憾我不能分享任何东西