使用Twitter Bootstrap将页脚固定在页面底部

75

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

我已将所有页面放在“持有人”中

#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>

我想保持页脚流畅。

css twitter-bootstrap

— 里奇维斯
source

1

那么您的页脚的绝对位置完全取决于container-div的大小。因此，如果容器中没有任何内容，则该内容可能会终止于页面中间的某个位置，并且您将页脚定位在该位置下方50px。

— jakee

感谢您的回答，如何解决这个问题？

— Richlewis

将页脚

— 放置

这可能就是您要寻找的内容stackoverflow.com/q/8824831/681807

— 我的头疼

@MyHeadHurts，这是您正在使用的解决方案，有点以为我现在可能会遇到问题，因为我已将页脚放入容器，行和跨距12

— Richlewis

44

如评论中所述，您已将代码基于此解决方案：https : //stackoverflow.com/a/8825714/681807

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

html,body{
    height: 100%
}

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

— 我头疼
source

非常感谢，我认为html的身高已经设定好了，好像没有了，还改变了底部，瞧。再次感谢

— Richlewis 2012年

道歉再次询问，但是我现在注意到，当视口缩小以表示iPhone的大小时，页脚文本被内容覆盖了吗？有任何想法吗？

— Richlewis

没问题。您是否正在申请margin-bottom: 50px页脚之前的最后一部分内容？如果您确实使用了它，但是它不起作用，那么您可能需要为iPhone增加此设置（不确定为什么这样做，但是可能是这样）。您可以使用CSS媒体查询

— My Head Hurts

1

我看到了我的错误，我没有像您所说的在页脚之前将margin-bottom：50px应用于内容，将bottom设置为0，现在很好，不需要媒体查询... PHEW！

— Richlewis

那是一个很棒的解决方案。

— Ryu_hayabusa

94

只需将类navbar-fixed-bottom添加到页脚即可。

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

Bootstrap 4的更新-

正如Sara Tibbetts提到的那样-类是固定的

<div class="footer fixed-bottom">

— 乔恩
source

12

这创建了一个冻结的页脚，其内容在其下方向上滚动。我想念什么吗？谢谢。

— 2014年

如果那是冻结的意思，它会使页脚停留在屏幕底部。即使内容有重叠，它也会在小屏幕上显示页脚。取决于是否要始终显示页脚

— Jon

还需要注意的是，如果您有JS生成的domng-repeat角形...您将需要将margin-bottom生成的元素放在包装纸上，使其等于粘性页脚的高度... bootstrap在页脚上放置边距顶部，但边距-top不适用于生成的dom，而最终生成的dom的底部将位于页脚下方。

— 本杰明·科南

谢谢！为我工作！

— FlokiTheFisherman

4

从Bootstrap 4开始，而navbar-fixed-bottom不仅仅是fixed-bottom

— Sara Tibbetts

12

上面提到的大多数解决方案都不适合我。但是，下面给出的解决方案可以正常工作：

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

资源

— 黑胡子
source

3

有效但覆盖内容

— Rami Alloush

为我工作得很好

— Ozan Yasin Dogan

8

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;
}

— 伊斯威
source

谢谢，@renderbody（）在做什么，我之前尝试过此解决方案，但实际上得到的@renderbody（）输出为html吗？

— Richlewis

忽略该部分-它只是一个从其他控件调用主体内容的函数。

— easwee 2012年

6

这是使用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>

小提琴

— 胜利者
source

神奇使用钙。可悲的是，使用自定义功能的自定义网站在2017年仍然是一个问题

— 闪耀

6

使用引导程序类可以发挥自己的优势。navbar-static-bottom将其留在底部。

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

— 编码爱好者
source

1

使用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

— 达米安·扎皮耶夫斯基（Damian Czapiewski）
source