Html 如何强制我的页脚粘在 CSS 中任何页面的底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5516910/
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
How can I force my footer to stick to the bottom of any page in CSS?
提问by oxo
This is my code:
这是我的代码：
#footer {
font-size: 10px;
position:absolute;
bottom:0;
background:#ffffff;
}
I've no idea what is wrong with this - can anyone help?
我不知道这有什么问题-有人可以帮忙吗？
EDIT: For some more clarity on what's wrong: The footer is displayed on the bottom as expected when the page loads. However, when the web page's height is > than the dimensions on the screen such that a scroll bar appears, the footer stays in that same location. That is to say, when the height of the page is <= 100%, the footer is at the bottom. However, when the page height is >100%, the footer is NOT at the bottom of that page, but at the bottom of the visible screen instead.
编辑：为了更清楚地了解什么是错的：当页面加载时，页脚按预期显示在底部。但是，当网页的高度 > 大于屏幕上的尺寸以显示滚动条时，页脚将保持在同一位置。也就是说，当页面高度 <= 100% 时，页脚在底部。但是，当页面高度 >100% 时，页脚不在该页面的底部，而是在可见屏幕的底部。
EDIT: Surprisingly, none of the solutions below worked. I ended up implementing a sidebar instead.
编辑：令人惊讶的是，以下解决方案均无效。我最终实现了一个侧边栏。
回答by SLaks
You're probably looking for this example:
你可能正在寻找这个例子：
<div class="wrapper">
Your content here
<div class="push"></div>
</div>
<div class="footer">
Your footer here
</div>
CSS:
CSS：
For a 142-pixel footer
对于 142 像素的页脚
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
回答by jeegnesh
Try this:
尝试这个：
position: fixed;
bottom: 0;
回答by Fabricio
I had the same question, came here looking for an answer, didn't find it, then tried a few experiments on my own, and finally got the solution:
我有同样的问题，来到这里寻找答案，没有找到，然后自己尝试了一些实验，终于得到了解决方案：
#body {
overflow-y: 0 auto;
}
#footer {
position: fixed;
top: 100vh; left: 0;
margin-top: -100px;
width: 100%; height: 100px;
padding: 10px;
color: #fff; background-color: rgba(0,0,0,0.6);
}<div id="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div id="footer">
<span>Some dummy Text</span>
</div>回答by k to the z
The wrapper is the rest of your page. The negative/positive margin/height values are where the magic happens.
包装器是页面的其余部分。负/正边距/高度值是神奇发生的地方。
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}
.footer, .push
{
height: 142px; /* .push must be the same height as .footer */
}
回答by PHP
Do not use position: absolute; for any footer as the page will change in height. If it is absolute then your footer will not move with the page height.
不要使用位置：绝对；对于任何页脚，因为页面的高度会发生变化。如果它是绝对的，那么您的页脚将不会随着页面高度移动。
You want to use ryan fait's method.
您想使用 ryan fait 的方法。
Although I would personally do it like this;
虽然我个人会这样做；
.wrap {margin: auto; width: 980px;}
#content {min-height: 600px;}
#footer {height: 300px;}
<div class="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<div class="wrap">
</div>
</div>
This way you don't have to mess around with negative margins and padding. Also this can easily be a part of html5 changing #footer to
这样你就不必搞乱负边距和填充。这也很容易成为 html5 的一部分，将 #footer 更改为
<footer>
</footer>
回答by Samuel
#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}
回答by Carla
This is what I did and it caused my footer to stay at the bottom.
这就是我所做的，它导致我的页脚停留在底部。
.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}
回答by Makhi Ngubane
.footer-small, .push {
background-color: #2C3E50;
position: fixed;
padding-top: 5px;
clear:both;
width: 100%;
bottom:0px;
z-index: 0;
}
this is also working for me....
这也对我有用....
回答by J0ANMM
I struggled to find a solution, as none of the suggested achieved what I wanted:
我努力寻找解决方案，因为没有一个建议达到我想要的：
- If there is to less content, stay at the bottom of the page, not in the middle.
- If there is enough content, do not be stick and overlap the content, just stay at the bottom.
- Hide it from the first sight, so only if the user scrolls down the footer is seen.
- 如果内容较少，请留在页面底部，而不是中间。
- 如果有足够的内容，不要粘贴和重叠内容，只停留在底部。
- 从第一眼就隐藏它，所以只有当用户向下滚动页脚时才会看到。
This is what worked for me:
这对我有用：
html:
html：
<body>
<div class="page-wrapper">
<h1>
Page
</h1>
</div>
<footer>
Footer here
</footer>
</body>
css:
css：
body {
height: 100%;
width: 100%;
}
.page-wrapper {
min-height:100vh; /*1vh = 1% of browser screen height*/
}
footer{
position: relative;
width: 100%;
bottom: 0px;
}
Herein action.
这里在行动。
回答by Calin Rusu
Why not with jquery?
为什么不使用 jquery？
Put a wrapper div between header and footer and assign min-height property for wrapper with jquery equal with the difference between document height and (header height + footer height).
在页眉和页脚之间放置一个包装器 div 并为包装器分配 min-height 属性，jquery 等于文档高度和（页眉高度 + 页脚高度）之间的差值。
<script type="text/javascript">
$(document).ready(function(){
var dh = $(document).height(); //document height here
var hh = $('header').height(); //header height
var fh = $('footer').height(); //footer height
var wh = Number(dh - hh - fh); //this is the height for the wrapper
$('#wrapper').css('min-height', wh); //set the height for the wrapper div
});
</script>
