Bootstrap 粘性页脚存在小宽度页面的问题答案

【问题标题】：Bootstrap sticky footer has problems with small width pageBootstrap 粘性页脚存在小宽度页面的问题
【发布时间】：2017-09-09 02:59:20
【问题描述】：

我正在尝试创建一个位于页面内容下方并贴在页面底部的页脚。我尝试将Twitter Bootstrap 3 Sticky Footer 应用于我的页面，但它会导致页脚粘在底部并与页面内容重叠（如果页面太短）。

我目前正在使用 css：

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 348px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 348px;
}

和html：（简化）

<body>
   <!-- Navigation -->
  <div class="wrapper">
    <div class="container"
    page content
    </div>
  </div>
<footer class="footer navbar-fixed-bottom">
  <!-- Footer-->
</footer>
</body>

并且页脚现在粘在底部，但是当页面很窄时，您可以看到背景而不是页脚背景覆盖它。

Image

我们将不胜感激任何解决此问题的帮助。

【问题讨论】：

您有指向“短”页面的链接吗？啊，页面不是很短的时候也不能正常工作。
您的页面看起来不错？您指定的链接中的粘性页脚在哪里？此外，我不建议制作 348px 高的页脚sticky !!
@JonesVinothJoseph 底部的黑色页脚。 i.stack.imgur.com/LrWe5.png 当页面变窄时会发生这种情况。

标签： html css twitter-bootstrap

【解决方案1】：

问题在于高度。只需从footer 中删除高度就可以了。

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 348px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

<!----html---->
<body>
    <!-- Navigation -->
    <div class="wrapper">
        <div class="container">page content</div>
    </div>
   <footer class="footer navbar-fixed-bottom"></footer>
</body>

【讨论】：

这个很完美@huhn
谢谢。但是，现在当页面变窄时，页脚开始与页面内容重叠，将其隐藏。 i.imgur.com/St43mlr.png
为所有屏幕编写媒体查询，然后更改包装类的值。例如 .wrapper { margin-top: 16px;底部填充：500px； }
@sneha 然后 OP 将不得不坐下来调整浏览器的大小并找到所有屏幕尺寸的所有 margin-bottom 值:)
这就是为什么我说为移动设备、平板电脑和桌面设备编写媒体查询。

【解决方案2】：

看到你用过jQuery。除了从footer 中删除高度外，一个简单的resize() 事件可以确定正确的margin-bottom。

$(window).resize(function(){
    var xHeight = $('.footer').height();
    $('body').css('margin-bottom',xHeight + 'px');
})

希望对你有帮助

【讨论】：

这可以完成工作。需要 jQuery 有点令人失望。
或者按照@sneha 的建议使用媒体查询！！但是你必须在哪个屏幕尺寸上工作需要多少margin-bottom