引导程序2.3.2中的粘性页脚导致巨大的间隙和滚动

Question

我已在我的网站上为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;
}

Answer 1

由于#push div位于wrapper div之外，因此无法提供所需的结果。

Answer 2

在您的HTML中，您有：

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

在bootstrap中他们有：

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

只需缩进#wrap

中的#push

Answer 3

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

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

Answer 4

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