此问题在此处已有答案：
Fill remaining vertical space with CSS using display:flex（6个答案）
3天前关闭。
我有一个应用程序，它的头有可变的高度，我这里的例子展示了一些，但它不是像这样硬编码的，而是头可以根据它的内部内容改变高度。
然后我有一个主内容部分，如果内容多于垂直空间，我希望它是可滚动的。最后，页脚部分必须始终位于页面底部。页脚的高度是静态设置的，在某个断点处有一个高度变化。
理想情况下，我希望整个页面都不能滚动（只有主部分的内容可以滚动）。
我一直在尝试根据需要硬编码高度变化，但很快发现，由于标题高度变化的不可预测性，根据断点进行数学运算并不能解决问题。
在保持页眉不变的情况下，有没有其他方法可以将页脚保持在页面底部，同时保持可滚动的主要内容，而不必硬编码所有断点高度计算？
* {
margin: 0;
padding: 0
}
header {
background-color: coral;
height: 20px;
}
main {
background-color: goldenrod;
height: calc(100vh - 20px - 75px);
}
footer {
background-color: cadetblue;
height: 75px;
}
@media (min-width: 500px) {
header {
height: 40px;
}
main {
height: calc(100vh - 40px - 50px);
}
footer {
height: 50px;
}
}
@media (min-width: 900px) {
header {
height: 60px;
}
main {
height: calc(100vh - 60px - 50px);
}
}
@media (min-width: 1200px) {
header {
height: 80px;
}
main {
height: calc(100vh - 80px - 50px);
}
}
@media (min-width: 1400px) {
header {
height: 100px;
}
main {
height: calc(100vh - 100px - 50px);
}
}<html>
<header>Variable height header</header>
<main> Content </main>
<footer>This is a footer</footer>
</html>
1条答案
按热度按时间vsdwdz231#
您可以使布局占据整个视口高度，并使用网格或弹性框使内容区域可拉伸，同时保持页眉和页脚固定。
在内容区域设置
overflow: auto将允许它根据需要滚动。