编辑
错误地标记为重复，我在测试所提及问题的答案之前将其标记为重复。它没有提供我想要的东西，它最初是一个粘性页脚，只有在内容大于视口(viewport)时才 float 到页面底部。
/编辑
EDIT2
在 here 找到答案，纯 CSS 并且完全符合我的要求。
/EDIT2
我想要一个粘性页脚，直到文档高度大于视口(viewport)高度，然后它应该位于文档的末尾。
文档是这样构建的:
<body>
<div class="header">
<!-- content -->
</div>
<div class="page-content">
<!-- content -->
</div>
<div class="footer">
<!-- content -->
</div>
</body>
.header高度为 101px和 .footer高度为 173px .
.page-content具有可变高度，具体取决于内容。
我想要的是 .footer坚持viewport的底部只要.page-content document 没有包含足够的内容具有比 viewport 更高的高度
我试过给 .page-content一个min-hieght所以它总是会溢出视口(viewport)，但这很丑陋。
这可能是纯的CSS或者 Javascript/JQuery进来玩吗？
最佳答案
可以使用的两种相对较新的方法是使用 calc 和 flexbox。两者都有不错的支持(超过 90% 没有 calc 的前缀和 flexbox 的前缀)。使用它们非常简单，尤其是与一些较旧的(并且公认的更受支持的)方法相比。如果你真的想插入支持那么viewport units可以使它们更简单。
方法一 - 计算:
CSS:
/* Only needed if not using vh in main */
html, body {
height: 100%;
}
header {
/* Needs to be static */
height: 70px;
}
footer {
/* Needs to be static */
height: 30px;
}
main {
/* Can use 100vh instead of 100% */
min-height: calc(100% - 70px - 30px);
}
HTML:
<header></header>
<main></main>
<footer></footer>
演示:codepen
方法二——Flexbox:
CSS:
body {
display: flex;
flex-direction: column;
/* If using percent then html needs a height of 100% */
min-height: 100vh;
}
main {
flex: 1;
}
HTML:
<header></header>
<main></main>
<footer></footer>
演示:codepen
flexbox 版本很好，因为页眉和页脚可以是流动的。 main 中的 flex: 1; 确保 main 将填充页眉和页脚所需的任何剩余空间。 Calc 的版本不太强大，需要静态页眉和页脚，但没有前缀。就我个人而言，使用 autoprefixer 或 prefixfree 确保我不必担心前缀，它们都可以正常工作。
关于javascript - 粘性页脚直到文档高度大于视口(viewport)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31179944/