粘贴页脚直到文档高度大于视口 [英] Sticky footer till document height greater than viewport
问题描述
EDIT
未正确标记为重复，我在测试问题的答案之前将其标记为重复。它不提供我想要的，它是一个粘性页脚最初，只有当内容大于视口时，浮动到页面的底部。
/ EDIT
找到答案通过此处，纯CSS，并完全按我想要的。
/ EDIT2
我想要一个粘性页脚，直到文档高度大于视口高度
文档是这样建立的：
< body>
< div class =header>
<！ - content - >
< / div>
< div class =page-content>
<！ - content - >
< / div>
< div class =footer>
<！ - content - >
< / div>
< / body>
.header 的高度为 101px 和 .footer 的高度为 173px 。
.page-content 根据内容有可变的高度。
只要 .page-content 才能粘贴到视口的底部视口中包含的内容不足
我尝试给予 .page-content a min-hieght
这可能是纯粹的 CSS Javascript / JQuery 进来玩吗？
两个相对较新的可以使用的方法是使用calc和flexbox。两者都有适当的支持（高于90％，没有前缀 calc ，前缀为 flexbox ）。使用它们是相当简单的，特别是与一些较旧（并且承认更支持）的方法相比。如果您真的要推送支持，则视口单元可以使它们更简单。
方法一 - 计算：
CSS：
/ *仅在主体中不需要使用vh * /
html，body {
height：100％;
}
header {
/ *需要静态* /
height：70px;
}
footer {
/ *需要静态* /
height：30px;
}
main {
/ *可以使用100vh而不是100％* /
min-height：calc（100％ - 70px - 30px）;
}
HTML：
< header>< / header>
< main>< / main>
< footer>< / footer>
DEMO： codepen
方法二 - Flexbox：
CSS： / p>
body {
display：flex;
flex-direction：column;
/ *如果使用百分比，则html需要高度为100％* /
min-height：100vh;
}
main {
flex：1;
}
HTML：
< header>< / header>
< main>< / main>
< footer>< / footer>
DEMO： codepen
flexbox版本不错，因为页眉和页脚可以是流畅的。主体中的 flex：1; 确保main将填充页眉和页脚之后剩下的任何剩余空间。 Calc的版本不太强大，需要一个静态页眉和页脚，但没有前缀。他们都对我很好，对我个人来说，使用自动前缀或前缀，确保我不必担心前缀。
EDIT
Incorrectly marked as a duplicate, I marked it duplicate before I tested the answer on the referred question. It doesn't provide the exactly what I want, which is a sticky footer initially and only float to the bottom of the page when the content is larger than the viewport.
/EDIT
EDIT2
Found the answer over here, pure CSS and does exactly what I want.
/EDIT2
I want a sticky footer until the document height is greater than the viewport height, then it just should be at the end of the document.
The document is build up like this:
<body>
<div class="header">
<!-- content -->
</div>
<div class="page-content">
<!-- content -->
</div>
<div class="footer">
<!-- content -->
</div>
</body>
The .header has a height of 101px and .footer has a height of 173px.
.page-content has a variable height depending on the content.
What I want is for .footer to stick to the bottom of the viewport as long as .page-content doesn't contain enough content for the document to have a greater height than the viewport
I tried giving .page-content a min-hieght so it always overflows the viewport but that is just plain ugly.
Is this possible pure CSS or does Javascript/JQuery come in to play here?
Two relatively newer methods that can be used are using calc and flexbox. Both have decent support (above 90% without prefixes for calc and with prefixes for flexbox). Using them is pretty simple, especially compared to some of the older (and admittedly more supported) methods. If you really want to push support then viewport units can make them even simpler.
Method One - Calc:
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>
DEMO: codepen
Method Two - 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>
DEMO: codepen
The flexbox version is nice because header and footer can be fluid. The flex: 1; in main makes sure that main will fill any remaining space left after header and footer take whatever they need. Calc's version is less powerful, requiring a static header and footer, but no prefixes. They both work fine for me, personally, with either autoprefixer or prefixfree making sure I don't have to worry about prefixes either way.
这篇关于粘贴页脚直到文档高度大于视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
