Twitter Bootstrap 3 Sticky Footer

我已经使用twitter引导框架很长一段时间了，他们最近更新到版本3!

我有麻烦让粘性页脚粘到底部，我已经使用了twitter bootstrap网站提供的启动器模板，但仍然没有运气，有什么想法吗?

当前回答

当前版本的bootstrap似乎不再适用于这个函数了。如果你下载了他们的sticky-footer-navbar的例子，并在主体区域放置了大量的内容，footer将被向下推过视口的底部。它一点也不粘。

2016-12-01 22:26:16

其他回答

这个棘手的例子对我不适用。我的解决方案:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}

2014-05-08 09:13:56

你可以简单地尝试在页脚导航栏上添加一个类:

navbar-fixed-bottom

然后创建一个CSS命名为custom.css和body padding像这样..

body { padding-bottom: 70px; }

2016-08-23 06:46:52

我想要一个灵活的粘性页脚，所以我才来这里。最重要的答案让我找到了正确的方向。

当前(10月16日2日)Bootstrap 3 css Sticky footer(固定大小)看起来像这样:

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

只要页脚的大小是固定的，body margin-bottom就会产生一个推力，让页脚可以坐进去。在本例中，两者都设置为60px。但如果页脚不是固定的，高度超过60px，它将覆盖你的页面内容。

使灵活:删除css正文边距和页脚高度。然后添加JavaScript来获取页脚高度，并设置body的marginBottom。这是通过setfooter()函数完成的。接下来添加事件监听器，用于页面第一次加载和调整大小时运行setfooter。注意:如果你的页脚有一个手风琴或其他触发大小变化的东西，而没有调整窗口的大小，你必须再次调用setfooter()函数。

运行代码片段，然后全屏演示。

2016-10-03 01:49:44

这是一个非常简单和干净的粘性页脚，你可以在bootstrap中使用。完全响应!

HTML

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

示例:CodePen Demo

2015-10-24 23:48:52

使用flexbox是我从CSS-tricks的人那里找到的最简单的方法。这是真正的sticky-footer，它在内容< 100%页面和> 100%页面时工作:

<body>
  <div class="content">
  content
</div>
<footer></footer>
</body>

和CSS:

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

请注意，这是bootstrap-不可知论的，所以它可以使用bootstrap，也可以不使用bootstrap。

2017-01-14 08:35:06

Twitter Bootstrap 3 Sticky Footer

推荐文章

最新文章

标签