CSS 在内容很少的页面上强制将页脚放在底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16679146/
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
force footer on bottom on pages with little content
提问by pom4ik
I have a page with only a couple of lines of content. I want the footer to be pushed to the bottom.
我有一个只有几行内容的页面。我希望页脚被推到底部。
<div id="footer"></div>
I don't want to use
我不想使用
#footer
{
position:fixed;
bottom:0;
}
AKA Sticky Footer
又名粘性页脚
Is this possible without jQuery?
如果没有 jQuery，这可能吗？
any suggestions?
有什么建议？
回答by Vinícius Moraes
There is another sticky footerby Ryan Faitthat doesn't use position fixed:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
回答by Chidozie Nnachor
This Flexboxsolution is neater and far easier to implement:
这个Flexbox解决方案更简洁，更容易实现：
HTML
HTML
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS
CSS
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
Just ensure you wrap the necessary divsinside the body.
只需确保将必要的内容divs包裹在body.
回答by Thomas Higginbotham
Here is a solution that does not require that the footer be placed outside of the main wrapper element, which is how most people structure their pages.
这是一个不需要将页脚放置在主要包装元素之外的解决方案，这是大多数人构建页面的方式。
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding-bottom: 1em; /* Height of footer */
min-height: 100%;
}
header {
background-color: #cff;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
background-color: #000;
}<div class="wrapper">
<header>I am the header.</header>
<article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
<footer>I am the footer.</footer>
</div>Explanation
解释
The wrapper element will fill 100% of the viewport height. (You could also use 100vh for the wrapper if you don't want to set the height of the html and body elements.) The wrapper also has a bottom padding to create a placeholder for the footer to sit.
包装元素将填充视口高度的 100%。（如果您不想设置 html 和 body 元素的高度，您也可以使用 100vh 作为包装器。）包装器还有一个底部填充来为页脚创建一个占位符。
The footer is absolutely positioned to the bottom of the wrapper and sits in the placeholder created by the wrapper's bottom padding.
页脚绝对位于包装器的底部，并位于由包装器底部填充创建的占位符中。
This means that when the page does not have scrollbars, the footer will be positioned at the very bottom. However, when there is enough content for scrollbars to appear, the footer will be pushed down below the content.
这意味着当页面没有滚动条时，页脚将位于最底部。但是，当有足够的内容可以显示滚动条时，页脚将被下推到内容下方。
(The colorand background-colorCSS properties in the example are for decoration only, obviously. They are included so that when you run the code, you can clearly see the separated sections.)
（示例中的color和background-colorCSS 属性显然仅用于装饰。包含它们是为了在您运行代码时，您可以清楚地看到分隔开的部分。）
回答by Konstantin Tarkus
Try Sticky Footer Solution by Steve Hatcher
尝试 Steve Hatcher 的粘性页脚解决方案
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {
margin: 0;
padding: 0;
}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to the total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
}
/* must be same height as the footer */
#footer {
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear: both;
}
/*Opera Fix*/
body:before {
/* thanks to Maleika (Kohoutec)*/
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
回答by Afshin Izadi
Another way to do this if you don't know the footer size is to use javascript and css
如果您不知道页脚大小，另一种方法是使用 javascript 和 css
html, body{
height:100%;
height:100%;
}
#footer{
background-color: #292c2f !important;
position:absolute;bottom:0px;
}
and Javascript part
和 Javascript 部分
$(document).ready(function(){
if ($(document).height() > $(window).height()) {
$('#footer').css('position', 'relative');
}
});
You can do this with another approach just easily by setting min-height on the tag before your footer tag.
您可以通过在页脚标签之前在标签上设置 min-height 轻松地使用另一种方法来做到这一点。
.the-tag-before-footer{
min-height:30%;
}
