在页面底部粘贴页脚答案

【问题标题】：stick footer at the bottom of the page在页面底部粘贴页脚
【发布时间】：2013-09-21 06:39:19
【问题描述】：

请在 Firefox 中查看此站点：

http://www.imageworkz.asia/microtel

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

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

【问题讨论】：

标签： javascript css html

【解决方案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 */
}

或

您可以查看标题为“sticky footer”的post（和许多其他人）

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

使其与底部0值固定位置：

footer {
    position: fixed; 
    bottom: 0;
}

【讨论】：

【解决方案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>

【讨论】：