【问题标题】: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;
}

【问题讨论】:

标签: 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 divwrapper div 之外,所以没有给出想要的结果。

    【讨论】:

      猜你喜欢
      • 2014-07-02
      • 2015-11-15
      • 1970-01-01
      • 1970-01-01
      • 2014-09-09
      • 2013-05-25
      • 2018-11-22
      • 1970-01-01
      • 2012-07-23
      相关资源
      最近更新 更多