Twitter Bootstrap 3 Sticky Footer

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

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

当前回答

我在这个问题上有点晚了，但我看到了这篇文章，因为我刚刚被这个问题咬伤了，最终找到了一个非常简单的方法来克服它，简单地使用导航栏与导航栏固定底部类启用。例如:

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

HTH

2014-05-01 15:02:57

其他回答

简单的 js

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

Update # 1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});

2015-12-15 03:55:16

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

当前(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

Html

<footer class="footer navbar-fixed-bottom">
      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>

CSS

.footer {
    position: fixed;
    bottom: 0;
}

2021-01-20 11:06:19

除了刚才添加的CSS之外，还需要在关闭wrap div之前添加push div

HTML的基本结构是

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

实时视图编辑视图

2013-07-31 09:46:00

这个问题已经被flexbox彻底解决了:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

CSS

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

.Site-content {
  flex: 1;
}

2017-08-28 13:13:17

Twitter Bootstrap 3 Sticky Footer

推荐文章

最新文章

标签