Code
2025-05-05 07:00:00

Twitter Bootstrap 3 Sticky Footer

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

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

当前回答

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

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

2016-10-03 01:49:44

其他回答

只需将类navbar-fixed-bottom添加到页脚。

<div class="footer navbar-fixed-bottom">
2014-02-06 13:20:56

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

用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

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

总结所有这些，只要记住一件事，除了footer以外的所有东西都应该有最小高度:100%或更少。

2014-11-05 11:12:29

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1