使用 Twitter Bootstrap 使页脚粘在页面底部答案

【问题标题】：Make footer stick to bottom of page using Twitter Bootstrap使用 Twitter Bootstrap 使页脚粘在页面底部
【发布时间】：2012-07-18 08:20:56
【问题描述】：

我有一些网页内容不多，页脚位于页面中间，但我希望它位于底部。

我已经把我所有的页面都放在了一个“持有人”中

#holder {
  min-height: 100%;
  position:relative;
}

然后在我的页脚中使用以下 CSS

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

我的页脚的 html

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:exampleemail@gmail.com</li>
        </ul>
      </div>
    </div>
  </div>
</div>

我想保持页脚流畅。

【问题讨论】：

你的页脚的绝对位置完全取决于容器 div 的大小。因此，如果容器中没有任何内容，它可能会在页面中间某处结束，并且您的页脚位置低于该位置 50px。
感谢您的回答，有什么办法可以解决这个问题？
要么将页脚放在容器 div 之外，要么强制容器具有完整高度
这可能就是你要找的stackoverflow.com/q/8824831/681807
@MyHeadHurts，这是我正在使用的您的解决方案，有点想我现在可能有问题，因为我已将页脚放入容器中，行和跨度 12

标签： css twitter-bootstrap

【解决方案1】：

只需将类 navbar-fixed-bottom 添加到您的页脚。

<div class="footer navbar-fixed-bottom">

Bootstrap 4 更新 -

正如 Sara Tibbetts 所提到的 - 类是固定底部的

<div class="footer fixed-bottom">

【讨论】：

这创建了一个冻结的页脚，内容在其下方向上滚动。我错过了什么吗？谢谢。
如果这就是你所说的冻结的意思，它会使页脚粘在屏幕底部。即使内容重叠，它也会在小屏幕上显示页脚。取决于您是否要始终显示页脚
还需要注意的是，如果您有 JS 生成的 dom ng-repeat 角度...您需要将 margin-bottom 放在包装器上，以便生成的元素等于粘性页脚的高度... bootstrap puts-margin top 在页脚上，但 margin-top 不会应用于生成的 dom，你最终会得到生成的 dom 的底部将在页脚下。
谢谢！为我工作！
从 Bootstrap 4 开始，navbar-fixed-bottom 只是 fixed-bottom

【解决方案2】：

正如 cmets 中所讨论的，您的代码基于此解决方案：https://stackoverflow.com/a/8825714/681807

此解决方案的关键部分之一是将 height: 100% 添加到 html, body 以便 #footer 元素具有可使用的基本高度 - 您的代码中缺少此高度：

html,body{
    height: 100%
}

您还会发现在使用bottom: -50px 时会遇到问题，因为当内容不多时，这会将您的内容推到首屏。您必须将margin-bottom: 50px 添加到#footer 之前的最后一个元素。

【讨论】：

非常感谢，我以为 html，body 高度已设置，似乎没有，也更改了底部，瞧。再次感谢
抱歉再次询问，但我现在注意到，当视口减小到说 iphone 的大小时，页脚文本与内容重叠？有什么想法吗？
没问题。您是否将margin-bottom: 50px 应用于页脚之前的最后一段内容？如果你是并且它不工作，那么你可能必须为 iPhone 增加这个（不知道你为什么会这样做，但可能是这种情况）。您可以使用CSS media queries 执行此操作
我明白了我的错误，我没有像你说的那样将 margin-bottom:50px 应用于页脚之前的内容，将底部设置为 0，现在很好，不需要媒体查询...PHEW！ !
这是一个很棒的修复；

【解决方案3】：

上面提到的大多数解决方案都不适合我。但是，下面给出的解决方案工作得很好：

<div class="fixed-bottom">...</div>

Source

【讨论】：

有效但覆盖内容
对我来说效果很好

【解决方案4】：

http://bootstrapfooter.codeplex.com/

这应该可以解决您的问题。

<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>

CSS：

html,body
{
height:100%;
}

#wrap
{
min-height: 100%;
}

#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
color:#fff;
}

【讨论】：

谢谢，@renderbody() 是做什么的，我之前尝试过这个解决方案，我实际上将@renderbody() 输出为 html？
忽略那部分 - 它只是一个从其他控件调用正文内容的函数。

【解决方案5】：

这是一个使用 css3 的示例：

CSS：

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML：

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

fiddle

【讨论】：

对 calc 的奇妙使用。遗憾的是，在 2017 年，使用一些引导功能的自定义网站仍然是一个问题

【解决方案6】：

使用引导类对您有利。 navbar-static-bottom 将其留在底部。

<div class="navbar-static-bottom" id="footer"></div>

【讨论】：

【解决方案7】：

这可以通过 CSS flex 轻松实现。具有如下 HTML 标记：

<html>
    <body>
        <div class="container"></div>
        <div class="footer"></div>
    </body>
</html>

应使用以下 CSS：

html {
    height: 100%;
}
body {
    min-height: 100%;
   display: flex;
   flex-direction: column;
}
body > .container {
    flex-grow: 1;
}

这里有 CodePen 可供使用：https://codepen.io/webdevchars/pen/GPBqWZ

【讨论】：