强制页脚停留在底部 CSS答案

【问题标题】：Force footer to stay at bottom CSS强制页脚停留在底部 CSS
【发布时间】：2012-10-12 20:22:42
【问题描述】：

我一直在搞乱 CSS，但由于某种原因我仍然无法让“粘性页脚”工作。

如果没有足够的内容，页脚可以正常工作并停留在底部，但是，如果有很多内容，最后 100px 总是在页脚后面，而我不知道为什么。

要了解会发生什么，请访问：http://hevvo.eu/~dev/backtrack/index.php

任何帮助将不胜感激。

【问题讨论】：

对我来说看起来不错有什么问题？它仅在某些浏览器中吗？在 Firefox 15.0.1 上看起来不错
我用的是 Firefox，我也用过 Chrome，但它也不能在那里工作。

标签： css sticky-footer

【解决方案1】：

来自 CSS 技巧：http://css-tricks.com/snippets/css/sticky-footer/

CSS：

* { margin:0; padding:0; } 

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 150px; }  /* must be same height as the footer */

#footer { 
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
} 

/* CLEAR FIX*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix { display: block;}
/* End hide from IE-mac */

HTML：

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>

【讨论】：

在我看来这是很多不必要的额外 css。
没错，但是当您处理跨浏览器的一致性和呈现时，CSS 总是会膨胀。

【解决方案2】：

有很多关于这个的文章。我最喜欢的是：

http://www.cssstickyfooter.com/using-sticky-footer-code.html

【讨论】：

确实，这就是我正在使用的 ;) 但它仍然无法正常工作
它只在内容很少的情况下起作用，一旦有整页内容，它就会隐藏在页脚后面，而不是将页脚向下推到最后 100px 左右。
只需将 padding-bottom: 100px; 添加到#wrapper 元素即可。
应该说“看到”，而不是“看起来”
谨慎访问上面的链接——自从评论发布后，它似乎变成了一个邪恶的坑

【解决方案3】：

您忘记在.wrapper 上设置padding-bottom: (height-of-footer)px。一旦你设置好了，它就可以正常工作了。即：

.wrapper {
  min-height: 100%;
  background: #F7F4EB;
  padding-bottom: 100px;
}

【讨论】：

不，我没有，因为当设置了填充并且内容很少时，填充是可见的并且看起来很荒谬，当内容也很多时它也无法修复它.. .
它确实对我有用，有很多内容，但你是对的，它看起来很奇怪，内容很少。

【解决方案4】：

通过在内容周围添加一个新的 div 并添加一个 padding-bottom: 100px 来修复它给它。

【讨论】：