Html 如何在不指定像素高度的情况下进行内容div溢出

我想让内容溢出，但不是整个页面。我的问题是，如果没有硬代码，我无法确定如何使内容高度取决于页脚（以及潜在的其他元素，如页眉），这些元素占用了多少水平空间。如何使内容占据尽可能多的水平空间，但仅此而已，然后使其余内容溢出

我的想法是，只要锁定内容高度，使用@media在不同分辨率下创建两个不同的高度，我就可以做到这一点

下面是我做的一个最小的例子，我在整个页面上都有溢出。这不是我想要的。我想让内容只占用页面上所有其他元素之后剩下的空间，然后使其内容溢出（删除main上的溢出）

请指教

在这个例子中

body{margin:0；padding:0；
}
主，页脚{color:#ffffff；}
主要{
背景：#000000；
}
梅因先生{
最大高度：100%；
}
.内容{
背景：蓝色；
溢出y：自动；
高度：自动；
}
.页脚{
背景：#6161；
高度：100px；
宽度：100%；
}
.box{
背景颜色：黄色；
宽度：95%；
高度：250px；
保证金：5px；
}

Main
1.
2.
3.
页脚

这就是你想要的效果吗？（没有图像，问题有点不清楚）

我使用flexbox和

flex grow

属性使

.main

元素扩展到页面的所有剩余可用高度。我还指定了body

100vh

高度，然后将

overflow:auto

应用于

.main

元素以使其滚动

有关flexbox的更多信息，请参阅

正文{
保证金：0；
填充：0；
高度：100vh；
}
主页脚{
颜色：#ffffff；
}
主要{
背景：#000000；
显示器：flex；
弯曲方向：立柱；
最大高度：100vh；
}
梅因先生{
柔性生长：1；
溢出：自动；
}
.内容{
背景：蓝色；
溢出y：自动；
高度：自动；
}
.页脚{
背景：#6161；
高度：100px；
宽度：100%；
}
.box{
背景颜色：黄色；
宽度：95%；
高度：250px；
保证金：5px；
}

主要
1.
2.
3.
页脚

我想我找到了解决办法。最后一点是在页脚上做最小高度。无需指定growth，因为在本例中假定只有content div会增长

正文{
保证金：0；
填充：0；##标题##
高度：100vh；
}
主页脚{
颜色：#ffffff；
}
主要{
背景：#000000；
显示器：flex；
弯曲方向：立柱；
最大高度：100vh；
}
梅因先生{
溢出：自动；
}
.内容{
背景：蓝色；
溢出y：自动；
高度：自动；
}
.页脚{
背景：#6161；
最小高度：100px；
宽度：100%；
}
.box{
背景颜色：黄色；
宽度：95%；
高度：250px；
保证金：5px；
}

主要
1.
2.
3.
页脚

您可以改为查看VH高度

高度：100vh

=视口高度的100%。从技术上讲，这是正确的，但更好的考虑方法是=可用高度的100%。如果您想用可用的高度填充一个div，这是一个非常有用的技巧。你也可以从100%中扣除，谢谢你的建议。看起来这并不能解决我的问题，因为我不知道周围元素（包括页脚或其他内容）的高度百分比。如果将其分别应用于

和

中（如80/20）或（90/10），则无论页脚高度如何，它都可以工作？你看到50/50页上最下面的例子了吗。问题是页脚的像素数是固定的，所以不能使用百分比，因为窗口大小可能会改变。此外，我可能在content div之前有一些元素，我还想考虑content div应该有多高。感谢您的参考和提出解决方案。下次将包括图像。不幸的是，这不起作用，因为页脚没有锁定到100px。展开解决方案的窗口时，页脚的高度会发生变化。