Question

我正在尝试创建一个位于页面内容下方并粘贴在页面底部的页脚。我尝试将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

非常感谢任何解决此问题的帮助。

Answer 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>

Answer 2

看到您使用了jQuery。除了从footer移除高度外，一个简单的resize()事件可以决定正确的margin-bottom。

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

希望这有帮助

Bootstrap粘性页脚有小宽度页面的问题

2 个答案: