页面底部的页脚

Question

请在Firefox中查看此网站：

http://www.imageworkz.asia/microtel

页脚不会像stackoverflow的页脚那样停留在页面底部。 我尝试了一些参考站点中所示的几种技术，但是仍然没有运气。

我需要一些CSS专家来帮助我解决这个问题。 谢谢！

Answer 1

有一些母马方法可以使页脚变粘。 固定高度的页脚的基本技巧

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -150px; /* the bottom margin is the negative value of the footer's height */
}
.footer {
    height: 150px; /* .push must be the same height as .footer */
}

要么

您可以检查标题为“粘性页脚”的这篇文章 （以及许多其他文章）

Answer 2

添加position:fixed; bottom:0; left:0 position:fixed; bottom:0; left:0 将position:fixed; bottom:0; left:0到页脚，它将固定到位。 如果您随后添加#container {padding-bottom:120px} （或该数字附近的内容），则在查看页面底部时，页脚将不会隐藏您的内容

Answer 3

将其固定位置设置为底部0值：

footer {
    position: fixed; 
    bottom: 0;
}

Answer 4

<script type="text/javascript">  
$(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>