Bootstrap粘性页脚与内容重叠

Question

Bootstrap粘性页脚与内容重叠

27

我是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 %}中仍然会重叠，我不知道该怎么办才能解决它。有人有想法吗？

- lll

7个回答

13

作为标准，Bootstrap头部和尾部的行为是符合预期的-它们会固定在顶部或底部，并覆盖主要内容。对于底部，解决方案是将 margin-bottom: [footer height]; 添加到 body 中，就像在 Bootstrap 网站上的自定义示例中所示的那样：

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无关！

- frumious

这是结果的屏幕截图：链接我尝试了很多方法，比如 body { margin: 0 0 60px; } 或者更改我的 jQuery 脚本，添加 bottom.nav，例如：$(document.body).css('margin-bottom', $('#botnavbar').height());（在我的页脚上使用正确的 ID）。但到目前为止都没有起作用。 - lll

我认为没有实际的代码 - 页面的HTML和CSS，可能很难提供帮助。您使用jQuery而不是直接更改CSS的原因是什么？ - frumious

我用它来响应式设计，不知道这是否有帮助，但对我有用。我正在寻找例子的页脚，但我不明白为什么总是会重叠，我添加了一个110%的margin-bottom, 它有效，但如果我添加内容那么我需要定义另一个margin bottom。（只有在禁用脚本时，margin bottom才起作用） - lll

13

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

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>

- facktory

2

你还需要在 body 上设置 margin:0。浏览器默认值为 8px。 - tao

问题在于您必须滚动才能看到页脚。您如何使页脚适合视口，使正文占据例如90％的高度，页脚占据10％？ - David

2

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

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

- Zache

2

嗨，Zache，请尽量避免使用简单的代码回答。请在您的答案中包含解释，以便OP能够理解您为什么使用它。 - Shaheryar.Akram

1

因为在搜索如何修复重叠页脚时，这是Google返回的结果，所以在此发布。

使用Bootstrap 5创建一个粘性页脚，不会重叠，只需按照文档将页脚包裹在clearfix标签中即可，如下所示：

<div class="clearfix">...</div>

https://getbootstrap.com/docs/5.3/helpers/clearfix/

如果您不确定如何使页脚固定在页面底部，请将 flexbox 类添加到您的 body 中，如下所示：

<body class="d-flex flex-column vh-100">...</body>

请在模板中的页脚前的 div/section 中添加 flex-grow-1。这将使其框填充可用空间并将页脚推到底部。

<div class="d-flex flex-grow-1">...</div>

- Rug

0

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

- Ursache Stefan

-3

将页脚的float:left设置为左浮动解决了我的问题。

.footer {
   float:left;
}

- Muhamed Shafeeq

3

浮动应该是最后的选择。您需要考虑各种浏览器如何解释您所做的事情。您希望使用99％的浏览器不会有不同解释的特定内容。在重置（例如Bootstrap）后，边距，填充等在99％的浏览器上应该没问题。多个浏览器以不同方式处理浮动，或者可能以不同方式处理父容器，这会搞砸浮动。-特别是在考虑到移动友好代码时。 - Wade

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wade · Accepted Answer

这是一个没有选择答案的旧话题。

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

我有一个固定的页眉，并希望页脚始终保持在底部。我曾经做到过，但当我调整大小以查看响应式时，页脚会重叠在内容上。我需要“内容”和“页脚”之间的填充/空间，以便它们不会看起来挤在一起。

在body标签上使用margin-bottom并没有起作用，它只是在我的页脚下面添加了一个间隙。当你思考margin在“body”标签上的行为方式时，这是有道理的。

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

body {
    padding-bottom: 120px;
}

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

当然，你们的身高会有所不同。希望这可以帮到你！