Bootstrap中的页脚，该页脚随内容扩展或固定在底部 [英] Footer in Bootstrap, that extends with content or sticks to the bottom

问题描述

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

I have been looking for a way to add a footer to a Twitter Bootstrap 3 project I am working on.

我想要的是，当内容太短而无法填满屏幕时，页脚会停留在页面底部，但是当内容确实填满屏幕时，页脚会被内容压低.

What I want is for the footer to stick to the bottom of the page when the content is too short to fill out the screen, but get pushed down by content when the content does fill the screen.

我找到的所有解决方案&到目前为止已经尝试过，或者没有起作用，或者始终显示了页脚，或者页脚位于页面下方，因此仅在滚动时可见.

All solutions I have found & tried so far, has either not worked, had the footer ALWAYS shown, or had the footer below the page, so it was only visible upon scrolling.

提前谢谢！

推荐答案

更新2019

固定"页脚和粘性"页脚之间存在区别...您想要粘性页脚.

Update 2019

There is difference between the "fixed" footer and "sticky" footer... you want the sticky footer.

引导程序3

使用标准的粘性页脚"示例.此方法包装了整个页面的内容，并将页脚向下推.

Use the standard "Sticky Footer" example. This method wraps the entire page content and pushes the footer down.

这是一个有效的演示: http://bootply.com/93620

Here is a working demo: 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;
}

---

引导程序4

由于在Bootstrap 4中默认使用flexbox，因此粘性"页脚更加容易.

Because flexbox is default in Bootstrap 4, the "sticky" footer is easier.

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

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

main {
    flex:1;
}

演示: Bootstrap 4粘性页脚

另一种情况是底部脚注始终位于底部 ，并且内容不会将其推到视口下方.取而代之的是，内容区域将根据需要而不是正文进行滚动.这是全高的应用"布局.

The other scenario is a bottom footer that is always at the bottom and the content doesn't push it below the viewport. Instead the content area scrolls as needed instead of the body. This is the full-height "app" layout..

演示: Bootstrap 4底部页脚

这篇关于Bootstrap中的页脚，该页脚随内容扩展或固定在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！