Bootstrap 粘性页脚重叠内容答案

【问题标题】：Bootstrap sticky footer overlapping contentBootstrap 粘性页脚重叠内容
【发布时间】：2020-12-11 05:10:10
【问题描述】：

我是 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 %} 中）始终存在，我不知道该怎么做才能修复它。有人有想法吗？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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;
}

当然，您的身高会有所不同。希望这会有所帮助！

【讨论】：

值得注意的是，顶部的固定导航栏需要 padding-top 到正文，同样固定的页脚需要填充底部
那么position: absolute究竟应该如何解决重叠问题？
这个 padding-bottom 与众不同！
TL;DR : body {padding-bottom: 50px;} 50px 是您的页脚高度加上额外的边距 (+1)
这是我的惊喜时刻，帮助我节省了数小时的调整时间。就我而言，我使用的是粘性页眉和固定页脚。我将页眉切换为固定并根据页脚/页眉的大小在顶部/底部添加填充。谢谢你的回答。

【解决方案2】：

作为标准，这是 Bootstrap 页眉和页脚的预期行为 - 它们贴在顶部或底部，并与主要内容重叠。页脚的解决方案是将margin-bottom: [footer height]; 添加到body，如customisation example on the Bootstrap site：

sticky-footer.css

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

您在问题中提到了margin-bottom，所以如果这对您不起作用，也许您可以发布您实际尝试过的内容？

附：这可能与 Symfony 无关！

【讨论】：

这是这个结果的屏幕：link 我尝试了很多类似 body { margin: 0 0 60px;或者通过添加bottom.nav来改变我的jQuery脚本：$(document.body).css('margin-bottom', $('#botnavbar').height()); （在我的页脚上有正确的 id）。但到目前为止没有任何效果。
我认为如果没有实际代码（页面的 HTML 和 CSS）就很难提供帮助。您使用 JQuery 而不是直接对 CSS 进行更改有什么特别的原因吗？
我将它用于响应式我不知道这是否有帮助，但这对我有用。我正在寻找 exemple 这个页脚，但我不明白为什么总是有重叠我添加一个 110% 的边距底部它可以工作，但如果我添加一个内容，那么我需要定义另一个边距底部。（边距底部仅在我禁用脚本时才有效）

【解决方案3】：

有一个新的基于弹性盒的现代解决方案。

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1;
}

<body>
  <header>Hey</header>
  <main>Here some content</main>
  <footer>And a perfect sticky footer without overlapping</footer>
</body>

【讨论】：

您还需要在body 上使用margin:0。浏览器默认为8px。
问题是你必须滚动才能看到页脚。您如何使页脚适合视口，以使主体采用例如90%的高度和页脚占10%？

【解决方案4】：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-footer {
  margin-top: auto;
}

【讨论】：

您好 Zache，请尽量避免使用明码回答。请对您的答案进行解释，以便 OP 了解您使用它的原因。

【解决方案5】：

尝试将container-fluid height 设置为auto。我也遇到了这个问题，这个解决方案在我的情况下有效。

【讨论】：

【解决方案6】：

制作页脚float:left 解决了我的问题。

.footer {
   float:left;
}

【讨论】：

浮动应该是最后的手段。您需要考虑各种浏览器如何解释您的操作。您想使用 99% 的浏览器不会以不同方式解释的特定内容。重置后 99% 的浏览器上的边距、填充等应该没问题（就像 Bootstrap 一样）。多个浏览器以不同的方式处理浮动，或者可能以不同的方式处理父容器，这会弄乱浮动。 - 考虑到移动友好代码时尤其如此。