twitter-bootstrap-3 - Bootstrap 中的页脚，随内容扩展或粘在底部

Question

我一直在寻找一种方法来为我正在处理的 Twitter Bootstrap 3 项目添加页脚。

我想要的是当内容太短而无法填满屏幕时，页脚会粘在页面底部，但是当内容填满屏幕时会被内容向下推。

到目前为止，我找到并尝试过的所有解决方案要么不起作用，要么始终显示页脚，要么在页面下方显示页脚，因此仅在滚动时才可见。

提前致谢!

Answer 1

2019 年更新

“固定”页脚和“粘性”页脚之间存在区别......您需要粘性页脚。

Bootstrap 3

使用标准的“粘滞页脚”示例。此方法包装整个页面内容并将页脚向下推。

这是一个工作演示:http://bootply.com/93620

<!-- Wrap all page content -->
<div id="wrap">
  <!-- Fixed navbar -->
  <div class="navbar navbar-default navbar-fixed-top">
   ...
  </div>
  <div class="container">    
    <!-- page content -->
  </div>
</div>
<div id="footer">
  Footer
</div>

/* 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 !important;
  height: 100%;
  /* 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;
}

Bootstrap 4

因为 flexbox 在 Bootstrap 4 中是默认的，所以“粘性”页脚更容易。

<wrapper class="d-flex flex-column">
    <nav>
    </nav>
    <main>
    </main>
    <footer>
    </footer>
</wrapper>

body, wrapper {
   min-height:100vh;
}

main {
    flex:1;
}

演示: Bootstrap 4 Sticky Footer

另一种情况是底部页脚始终位于底部，并且内容不会将其推到视口(viewport)下方。相反，内容区域会根据需要而不是正文滚动。这是全高“应用程序”布局..

演示: Bootstrap 4 Bottom Footer