CSS - 如何设置页脚样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19192211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - how to style a footer
提问by Pavel
is there a way to style a footer, so when there is a content (more than the height of the browser) it will be at bottom of the page(hidden), but if there is not enough content it will stick at bottom edge of the browser?
有没有办法给页脚设置样式，所以当有内容（超过浏览器的高度）时，它会在页面底部（隐藏），但如果没有足够的内容，它会粘在页面的底部边缘浏览器？
回答by jamesplease
One solution I use requires a known height of your footer.
我使用的一种解决方案需要您的页脚的已知高度。
Fiddles:
小提琴：
Here's the HTML:
这是 HTML：
<main>
hello
</main>
<footer>
i am the footer
</footer>
And here's the CSS:
这是CSS：
html, body {
height: 100%;
}
main {
min-height: 100%;
margin-bottom: -100px;
background: #ddd;
}
main:after {
content: "";
display: block;
height: 100px;
}
footer {
height: 100px;
background: #eee;
}
The trick is to set the main part of your document to have a min-heightof 100%. This element must contain everything else on your page. In my example, I used the mainelement for this.
诀窍是将文档的主要部分设置min-height为 100%。此元素必须包含页面上的所有其他内容。在我的示例中，我main为此使用了元素。
Next, give this element a negative margin equal to the height of the footer. This moves it up just enough to leave room for the footer there at the bottom.
接下来，给这个元素一个等于页脚高度的负边距。这将它向上移动到足以为底部的页脚留出空间。
The last piece of the puzzle is the afterelement. This is required to fill the space of that negative margin. Otherwise, the content of the mainwill overflow into the footer.
拼图的最后一块是after元素。这是填充负边距的空间所必需的。否则， 的内容main将溢出到页脚中。
回答by ummahusla
I can only recommend to read this.
Show footer if at bottom of page or page is short else hide
我只能推荐阅读这篇文章。
如果页面底部或页面很短则显示页脚，否则隐藏
回答by codingimages
You can always use the calc function in CSS to make out the difference in between the footer and the body height.
您始终可以使用 CSS 中的 calc 函数来确定页脚和正文高度之间的差异。
footer {
页脚{
height: calc(100vh - 100px);
}
}
for example...
例如...
