Bootstrap 2.3.2 中的粘性页脚导致巨大的间隙和滚动答案

【问题标题】：Sticky Footer in Bootstrap 2.3.2 causing huge gap and scrollBootstrap 2.3.2 中的粘性页脚导致巨大的间隙和滚动
【发布时间】：2014-01-20 02:39:18
【问题描述】：

我已经在我的网站上为 Bootstrap 2.3.2 实现了这个sticky footer，但是在一个内容很短的页面上遇到了问题here。内容和页脚之间的空间太大，滚动条也不方便。有没有办法防止内容短的页面出现巨大的空白和滚动条？

我正在使用此代码生成粘性页脚。

html, body {
      height: 100%;
      margin: 0;
      padding: 0;
}

#wrap{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -150px;
}

#push{
    height: 150px;
}

#footer{
   background-color: #3BC1CD;
   height: 150px;
}

【问题讨论】：

这是screenshot

标签： html css twitter-bootstrap sticky-footer twitter-bootstrap-2

【解决方案1】：

移除<div id="push"> 的高度或完全移除它。这是不必要的。

【讨论】：

或者只是完全删除<div id="push">，不知道为什么你一开始就有它。
当我删除#push div 时，长页面上的内容会进入页脚。另外，我相信#wrap 上的负边距应该与页脚高度相同（我的页脚是 150 像素）。
我明白了。为什么custom.css 中的footer 上有margin-top: 70px;？那你能把它去掉吗？

【解决方案2】：

按照 Bootstrap 示例，只需将您的 #push div 移入 #wrap div ：

<div id="wrap">
    ...
    <div id="push"></div>
</div><!-- #wrap -->
<div id="footer">
    ...
</div>

【讨论】：

【解决方案3】：

在您的 html 中，您有：

<div id="wrap"></div>
<div id="push"></div>
<div id="footer"></div>

在引导程序中他们有：

<div id="wrap">
    <div class="container">
        <div id="push"></div>
    </div>
<div id="footer"></div>

只需在#wrap 中缩进#push

【讨论】：

哎呀！有时你只需要第二双眼睛。那解决了它。谢谢！

【解决方案4】：

因为#push div 在wrapper div 之外，所以没有给出想要的结果。

【讨论】：