jQuery 即使使用动态高度网站，如何将页脚保持在底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8815784/
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 to keep footer at the bottom even with dynamic height website
提问by Rafael Fonseca
How do I keep a footer div always at the bottom of the window when I have a page that dynamically set the height (get info from database, for example) with CSS?
当我有一个使用 CSS 动态设置高度（例如从数据库获取信息）的页面时，如何使页脚 div 始终位于窗口底部？
If you want to do with jQuery, i came up with this and works fine:
如果你想用 jQuery，我想出了这个并且工作正常：
Set the CSS of your footer:
设置页脚的 CSS：
#footer { position:absolute; width:100%; height:100px; }
Set the script:
设置脚本：
<script>
x = $('#div-that-increase-height').height()+20; // +20 gives space between div and footer
y = $(window).height();
if (x+100<=y){ // 100 is the height of your footer
$('#footer').css('top', y-100+'px');// again 100 is the height of your footer
$('#footer').css('display', 'block');
}else{
$('#footer').css('top', x+'px');
$('#footer').css('display', 'block');
}
</script>
This script must be at the end of your code;
此脚本必须位于代码的末尾；
回答by HenryW
I think this will solve all your problems:
我认为这将解决您的所有问题：
<script>
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
}
});
</script>
You need at least an element with a #footer
你至少需要一个元素 #footer
When not want the scrollbar if content would fit to screen just change the value of 10 to 0 The scrollbar will show up if content not fits to screen.
如果内容适合屏幕而不需要滚动条，只需将 10 的值更改为 0 如果内容不适合屏幕，滚动条将显示。
回答by agarcian
I believe you are looking for a Sticky Footer
我相信你正在寻找一个粘性页脚
Try this: http://ryanfait.com/sticky-footer/
试试这个：http: //ryanfait.com/sticky-footer/
From the article above:
从上面的文章：
layout.css:
布局.css：
* {
margin: 0;
}
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/
*/
The html page:
html页面：
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
回答by Nikita ?
My favorite jQuery/CSS solution for a sticky footer (non-fixed) is this:
我最喜欢的用于粘性页脚（非固定）的 jQuery/CSS 解决方案是：
CSS:
CSS：
html {
position: relative;
min-height: 100%;
}
footer {
display:none;
position: absolute;
left: 0;
bottom: 0;
height: auto;
width: 100%;
}
jQuery:
jQuery：
function footerAlign() {
$('footer').css('display', 'block');
$('footer').css('height', 'auto');
var footerHeight = $('footer').outerHeight();
$('body').css('padding-bottom', footerHeight);
$('footer').css('height', footerHeight);
}
$(document).ready(function(){
footerAlign();
});
$( window ).resize(function() {
footerAlign();
});
DEMO:http://codepen.io/anon/pen/ZQxQoR
演示：http : //codepen.io/anon/pen/ZQxQoR
Note: your footer must start with <footer>and end with </footer>to use this code as is, or you can modify the code to match your footer's id/class.
注意：您的页脚必须以开头<footer>和结尾</footer>才能按原样使用此代码，或者您可以修改代码以匹配页脚的 id/class。
回答by orenl
Hereby a simple solution
特此简单解决
CSS:
CSS：
.footer_wrapper { width:100%; background-color:#646464; }
.footer_wrapper.fixed {position:fixed; bottom:0px;}
JS:
JS：
if ($(".Page").height()<$(window).height()){
$(".footer_wrapper").addClass("fixed");
}else{
$(".footer_wrapper").removeClass("fixed");
}
HTML:
HTML：
<div class="Page">
/* PAGE CONTENT */
<div class="footer_wrapper" >
/* FOOTER CONTENT */
</div>
</div>
回答by Ali Haider
Use the following to make a fixed footer on your web-page:
使用以下内容在您的网页上制作固定页脚：
CSS:
CSS：
body, html
{
margin: 0px; padding: 0px;
}
#footer
{
width: 100%;
height: 30px;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
/*text-align, background-color, and other specific styles can be applied here. You can change the height from 30px to anything which suits your needs. You can even comment Left: 0px & Right: 0px, but to make sure that it works in all browsers, lets leave them there.*/
}
HTML:
HTML：
/*Place this div anywhere on the page, inside the form tags.*/
<div id="footer">
/*Your text/elements goes here*/
</div>
Hope this helps!
希望这可以帮助！
Cheers,
干杯，
Veno
威诺
回答by Chamika Sandamal
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
see the working sample,
查看工作样本，
回答by Geoffrey
Not sure if this is what your looking for:
不确定这是否是您要找的：
<div style="position: fixed; bottom: 0px; left: 0px; right: 0px;">footer</div>
回答by Maheep
回答by javaJavaJava
I was checking this question to find the same answer. This was asked sometime back and maybe this is a new feature added by jQuery. But this is a simple fix that exists now:
我正在检查这个问题以找到相同的答案。有人问过这个问题，也许这是 jQuery 添加的新功能。但这是一个现在存在的简单修复：
Just add data-position="fixed" to the div tag if you are using jQuery.
如果您使用 jQuery，只需将 data-position="fixed" 添加到 div 标签。
http://demos.jquerymobile.com/1.2.0/docs/toolbars/bars-fixed.html
http://demos.jquerymobile.com/1.2.0/docs/toolbars/bars-fixed.html
<div data-role="footer" data-position="fixed">
<h5>footer - page 3</h5>
</div><!-- /footer -->
Hope this helps.
希望这可以帮助。
