使用引导程序 3 让页脚粘在底部答案

【问题标题】：Getting a footer to stick to the bottom with bootstrap 3使用引导程序 3 让页脚粘在底部
【发布时间】：2015-03-12 22:19:04
【问题描述】：

我错过了什么吗？我觉得我已经浏览了他们的网站文档几次，但在页脚上没有找到任何东西。

我只是希望有一个常规的反色页脚，即使没有任何东西可以保留它，它也会粘在屏幕的最底部。当内容长于屏幕高度时，它会将其向下推到底部。

现在我有这个：

<div class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="navbar-inner">
    <div class="container">
      <span>testing</span>
    </div>
  </div>
</div>

但每次屏幕分辨率低于980px 时，页脚都会跳到屏幕的最顶部。我没有经常使用引导程序，这似乎是他们应该考虑的事情，我可能在这里遗漏了一些关键的东西。谁能解释一下这个原因？

【问题讨论】：

你确定你在文档中看到了-getbootstrap.com/examples/sticky-footer
我遇到过这个。如果我没记错的话，它是针对早期版本的引导程序之一？ 2.东西？我也试过了，没有成功。
Twitter Bootstrap 3 Sticky Footer的可能重复

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这在 Bootstrap 3.3.1 中适用于我

<div class="container">
    [...]
</div>
<footer class="footer">
  <div class="container">
    <p class="text-muted">my footer</p>
  </div>
</footer>

确保页脚标签位于container div 之外

你也需要sticky-footer.css，即here

编辑：

按照您在 cmets 中的要求，您是否尝试过这个？：

<footer class="footer">
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="navbar-inner">
            <div class="container">
                <span>testing</span>
            </div>
        </div>
    </div>
</footer>

您还需要调整 .footer 的 css 类：

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

【讨论】：

如何将页脚设置为反色。据我所知，这只是将页脚放在底部，根本没有背景颜色
是的，这样做会将页脚推到 980 像素以下的顶部
到屏幕顶部？
是的，在它上面的东西把它推下来之前它可以走的高。
听起来你把它放在另一个容器里，你能用你的html修改你的问题吗？

【解决方案2】：

您可以通过以下方式在 Bootstrap 3 中实现粘性页脚：

CSS

html {
  position: relative;
  min-height: 100%;
}
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;
}

HTML

<div class="container">
  <div class="page-header">
    <h1>Sticky footer</h1>
  </div>
  <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
  <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>

<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

DEMO HERE

【讨论】：