Twitter Bootstrap 3 Sticky Footer

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

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

当前回答

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

其他回答

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

用Haml & Sass的话说就是:

Haml for app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

app/assets/stylesheet /application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

基于http://getbootstrap.com/examples/sticky-footer-navbar/

2014-04-14 09:40:50

基于jk -fdrv的回答，我添加了一个.on('resize'，函数()，以确保它在每种设备和每种分辨率上都能工作:

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

2016-04-27 02:01:56

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

Twitter Bootstrap 3 Sticky Footer

推荐文章

最新文章

标签