Question

我是Bootstrap的新手，我正在尝试将它与Symfony2一起使用。我已经有一个用于导航的主topbar sticky。我的问题是当我尝试在底部添加一个粘性的类似页脚，但它与我的内容重叠。我正在使用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标签上使用“padding-bottom”。我使用比我的页脚高度大6个像素的尺寸来确保这个小的填充/间距。

body {
    padding-bottom: 120px;
}

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

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

Answer 2

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

粘性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，所以如果这对你不起作用，也许你可以张贴你实际尝试的内容？

P.S。这可能与Symfony无关！

Answer 3

有一个新的基于flex-box的现代决策。

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>

Answer 4

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

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

Answer 5

尝试将container-fluid height设置为auto。我也遇到了这个问题，这种解决方案适用于我的情况。

Answer 6

浮动：左它解决了我的问题 .footer { float:left; }

Bootstrap粘性页脚重叠内容

6 个答案: