即使使用动态高度网站，如何将页脚保持在底部
Posted
技术标签:
【中文标题】即使使用动态高度网站，如何将页脚保持在底部【英文标题】：How to keep footer at the bottom even with dynamic height website 【发布时间】：2012-02-07 14:28:26 【问题描述】：当我有一个使用 CSS 动态设置高度（例如从数据库获取信息）的页面时，如何将页脚 div 始终保留在窗口底部？
如果你想使用 jQuery，我想出了这个并且工作正常：
设置页脚的 CSS：
#footer position:absolute; width:100%; height:100px;
设置脚本：
<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>
此脚本必须位于代码的末尾；
【问题讨论】：
【参考方案1】：我认为这会解决你所有的问题：
<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>
您至少需要一个带有#footer 的元素
如果内容适合屏幕而不需要滚动条，只需将值 10 更改为 0 如果内容不适合屏幕，将显示滚动条。
【讨论】：
var docHeight = $(document).height();将始终将页脚保持在页面内容下方 我建议使用 $('#footer').outerHeight();而不是 .height()【参考方案2】：我相信您正在寻找一个粘滞页脚
试试这个：https://web.archive.org/web/20161117191810/http://ryanfait.com/sticky-footer/（存档）
来自上面的文章：
layout.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/
*/
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>
【讨论】：
【参考方案3】：我最喜欢的粘性页脚（非固定）的 jQuery/CSS 解决方案是这样的：
CSS：
html
position: relative;
min-height: 100%;
footer
display:none;
position: absolute;
left: 0;
bottom: 0;
height: auto;
width: 100%;
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();
);
演示： http://codepen.io/anon/pen/ZQxQoR
注意：您的页脚必须以 <footer> 开头并以 </footer> 结尾才能按原样使用此代码，或者您可以修改代码以匹配您的页脚的 id/类。
【讨论】：
对我来说最好的解决方案！ +1 这太棒了，非常感谢，我花了 6 多个小时在纯 CSS 的解决方案上浪费时间 - 有时需要一点 jQuery！ 非常适合非固定但有粘性的页脚！【参考方案4】：这里是一个简单的解决方案
CSS：
.footer_wrapper width:100%; background-color:#646464;
.footer_wrapper.fixed position:fixed; bottom:0px;
JS：
if ($(".Page").height()<$(window).height())
$(".footer_wrapper").addClass("fixed");
else
$(".footer_wrapper").removeClass("fixed");
HTML：
<div class="Page">
/* PAGE CONTENT */
<div class="footer_wrapper" >
/* FOOTER CONTENT */
</div>
</div>
【讨论】：
【参考方案5】：使用以下方法在您的网页上制作固定页脚：
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：
/*Place this div anywhere on the page, inside the form tags.*/
<div id="footer">
/*Your text/elements goes here*/
</div>
希望这会有所帮助！
干杯，
维诺
【讨论】：
【参考方案6】：#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');
查看工作示例，
http://jsfiddle.net/RC3YX/
【讨论】：
页脚覆盖了页面底部的文字。 :( 迄今为止我看到的最简单和最好的解决方案。【参考方案7】：不确定这是否是您要找的：
<div style="position: fixed; bottom: 0px; left: 0px; right: 0px;">footer</div>
【讨论】：
【参考方案8】：见这两篇文章。 http://ryanfait.com/sticky-footer/ 和 http://css-tricks.com/snippets/css/fixed-footer/
【讨论】：
【参考方案9】：我正在检查这个问题以找到相同的答案。以前有人问过这个问题，也许这是 jQuery 添加的一个新特性。但这是一个现在存在的简单修复：
如果您使用 jQuery，只需将 data-position="fixed" 添加到 div 标签即可。
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 -->
希望这会有所帮助。
【讨论】：
以上是关于即使使用动态高度网站，如何将页脚保持在底部的主要内容，如果未能解决你的问题，请参考以下文章