Bootstrap 中的页脚，随内容延伸或粘在底部 [英] Footer in Bootstrap, that extends with content or sticks to the bottom

问题描述

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

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

我找到的所有解决方案&到目前为止尝试过，要么没有工作，要么总是显示页脚，要么页脚在页面下方，所以它只能在滚动时可见.

提前致谢！

解决方案

2019 年更新

固定"页脚和粘性"页脚之间存在差异……您需要粘性页脚.

引导程序 3

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

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

<div id="包裹"><!-- 固定导航栏--><div class="navbar navbar-default navbar-fixed-top">...

<div class="容器"><!-- 页面内容-->

<div id="页脚">页脚

/* 粘性页脚样式--------------------------------------------------*/html,身体 {高度:100%；/* html 和 body 元素不能有任何填充或边距.*/}/* 页面内容的包装器向下推页脚 */#裹 {最小高度:100%；高度:自动！重要；高度:100%；/* 按高度负缩进页脚 */边距:0 自动 -60px；/* 按页脚高度填充底部 */填充:0 0 60px；}/* 这里设置页脚的固定高度 */#页脚{高度:60px；背景色:#f5f5f5；}

<小时>

引导程序 4

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

<导航></nav><主要></main><页脚></页脚></包装器>身体，包装{最小高度:100vh；}主要的 {弹性:1;}

演示:Bootstrap 4 Sticky Footer

另一种情况是底部页脚总是在底部并且内容不会将其推到视口下方.相反，内容区域会根据需要滚动而不是正文.这是全高应用程序"布局..

演示:Bootstrap 4 底部页脚

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.

Thanks in advance!

解决方案

Update 2019

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

Bootstrap 3

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

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;
}

---

Bootstrap 4

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;
}

Demo: Bootstrap 4 Sticky Footer

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..

Demo: Bootstrap 4 Bottom Footer

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