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

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


当前回答

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

实时视图 编辑视图

其他回答

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

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

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

简单的 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());
});

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

当前(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()函数。

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

function setfooter(){ var ht = document.getElementById("footer").scrollHeight; document.body.style.marginBottom = ht + "px"; } window.addEventListener('resize', function(){ setfooter(); }, true); window.addEventListener('load', function(){ setfooter(); }, true); html { position: relative; min-height: 100%; } .footer { position: absolute; bottom: 0; width: 100%; /* additional style for effect only */ text-align: center; background-color: #333; color: #fff; } body{ /* additional style for effect only not needed in bootstrap*/ padding:0; margin: 0; } <div> Page content <br> <br> line 3 <br> <br> line 5 <br> <br> line 7 </div> <footer id="footer" class="footer"> <div class="container"> <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p> </div> </footer>

参考官方的Boostrap3粘性页脚示例, 没有必要添加<div id="push"></div>, CSS更简单。

官方示例中使用的CSS为:

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

以及基本的HTML:

<body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        
      </div>
    </div>

    <div id="footer">
      <div class="container">
       
      </div>
    </div>
</body>

您可以在粘脚示例的源代码中找到这个css的链接。

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

完整网址: https://getbootstrap.com/docs/3.4/examples/sticky-footer/sticky-footer.css