css Bootstrap 粘滞页脚与内容重叠

n1bvdmb6 于 2022-12-27 发布在 Bootstrap

关注(0)|答案(7)|浏览(257)

我是Bootstrap的新手，我尝试在Symfony 2中使用它。我已经有了一个用于导航的主顶栏粘性。我的问题是当我尝试添加一个类似的底部粘性页脚时，它会覆盖我的内容。我使用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 %}中）总是存在重叠，我不知道该怎么做才能修复它。有人有主意吗？

css

来源：https://stackoverflow.com/questions/26336190/bootstrap-sticky-footer-overlapping-content

7条答案

按热度按时间

xurqigkl1#

这是一个较旧的主题，没有选择答案。
我在一个新的引导模板上，将他当前的主题一节一节地移植到引导：）
我有一个粘滞的页眉，并希望页脚锁定到底部在所有次。我有它的工作，但当我重新调整它的大小，以查看它的React，页脚重叠的内容。我需要一个填充/空间之间的“内容”和“页脚”，所以它不会看起来混合在一起。
body标签上的margin-bottom不起作用，它在我的footer下面添加了一个间隙。当你考虑到margin在“body”标签上的行为时，这才有意义。
正确的答案是在body标签上使用“padding-bottom”，我使用了比页脚高度大6个像素的尺寸来确保这个小的填充/间距。

body {
    padding-bottom: 120px;
}

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

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

赞(0）回复(0）举报 2022-12-27

nukf8bse2#

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

粘页脚.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无关！

赞(0）回复(0）举报 2022-12-27

polhcujo3#

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

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>

赞(0）回复(0）举报 2022-12-27

zf9nrax14#

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

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

赞(0）回复(0）举报 2022-12-27

8wtpewkr5#

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

赞(0）回复(0）举报 2022-12-27

ekqde3dh6#

张贴在这里，因为这是谷歌返回时，搜索如何修复重叠页脚。
使用Bootstrap 5创建一个不重叠的粘滞页脚，方法是按照如下文档将页脚 Package 在clearfix标签中：

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

https://getbootstrap.com/docs/5.3/helpers/clearfix/
如果你不知道如何让页脚粘在页面底部，可以像这样在主体中添加一个flexbox类：

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

然后将flex-grow-1添加到模板中的div/section的footer之前，这会导致它的框填充可用空间，并将footer推到底部。

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

赞(0）回复(0）举报 2022-12-27

tquggr8v7#

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

.footer {
   float:left;
}

赞(0）回复(0）举报 2022-12-27

我来回答

css Bootstrap 粘滞页脚与内容重叠

7条答案

相关问题

热门标签

最新问答