html - Bootstrap 粘性页脚重叠内容

Question

我是 Bootstrap 的新手，我正在尝试将它与 Symfony2 一起使用。我已经有一个用于导航的主顶栏粘性。我的问题是当我尝试添加一个类似的页脚时，该页脚粘在底部，但它与我的内容重叠。我正在使用 JQuery 脚本来避免顶部导航栏的问题，如下所示:

$(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height());
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height());
        });
    });

我的主要 Twig 布局的结构是这样的:

    <div class="navbar navbar-default navbar-fixed-top" id="topnavbar">
      <div class="container-fluid">
      </div>
    </div>
    {% block body %}
    {% endblock %}
    <footer class="footer navbar-fixed-bottom">
    </footer>

我的 CSS 是原创的。我尝试使用 margin bottom 或 padding bottom 但我的内容重叠(在 {% block body %} 中)始终存在，我不知道该怎么做做修复它。有人有想法吗？

Answer 1

这是一个较旧的主题，没有选择答案。

我正在使用一个新的 Bootstrap 模板，将他当前的主题逐节移植到 Bootstrap :)

我有一个粘性页眉，并希望页脚在所有 次都锁定在底部。我让它工作，但是当我重新调整它的大小以查看它时，页脚与内容重叠。我需要在“内容”和“页脚”之间留一个填充/空格，这样看起来才不会混在一起。

body 标签上的 margin-bottom 不起作用，它在我的页脚下方添加了一个空白。当您考虑边距在“body”标签上的表现时，这才有意义。

正确答案是在 body 标签上使用“padding-bottom”。我使用比页脚高度大 6 像素的尺寸来确保这个小的填充/间距。

body {
    padding-bottom: 120px;
}

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 114px;
}

您的高度当然会有所不同。希望这对您有所帮助!