Twitter Bootstrap 3 Sticky Footer

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

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

当前回答

简单的 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

其他回答

除了刚才添加的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

# myfooter { 高度:3他们; background - color: # f5f5f5; text-align:中心; padding-top: 1 em; ｝ <页脚> < div class = "脚注" > <div class="容器流体" id="myfooter"> < div class = "行" > < div class = " col-md-12”> <p class="copy">版权所有;你的话< / p > < / div > < / div > < / div > < / div > > < /页脚

2015-01-27 16:41:20

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

使用flex!确保在HTML中使用body和main，这是最好的解决方案之一(除非你需要IE9支持)。它不需要固定的高度或类似的东西。

这也推荐用于Materialize !

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

main {
    flex: 1 0 auto;
}

2017-05-11 19:54:54

这是一个非常简单和干净的粘性页脚，你可以在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

Twitter Bootstrap 3 Sticky Footer

推荐文章

最新文章

标签