我通常熟悉使用css刷新页脚的技术。

但是我在将这种方法用于Twitter引导时遇到了一些麻烦,很可能是因为Twitter引导本质上是响应式的。使用Twitter引导,我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。


当前回答

根据Bootstrap 4.3的例子,如果你像我一样失去理智,这是它实际工作的方式:

footer div的所有父div都需要有高度:100% (h-100类) 页脚的直接父类需要有display: flex (d-flex类) 页脚需要有margin-top: auto (mt-auto类)

问题在于,在现代前端框架中,我们经常对这些元素进行额外的包装。

例如,在我的案例中,使用Angular,我用一个独立的应用根组件、应用主组件和页脚组件组成了视图——所有这些组件都将它们的自定义元素添加到DOM中。

因此,为了使它工作,我必须向这些包装器元素添加类:一个额外的h-100,将d-flex向下移动一级,并将mt-auto从页脚向上移动一级(因此实际上它不再在页脚类上,而是在<app-footer>自定义元素上)。

其他回答

这是用Twitter Bootstrap和新的navbar-fixed-bottom类的正确方法:(你不知道我花了多长时间寻找这个)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

在bootstrap 4.3的最新版本中,这可以使用.fixed-bottom类来完成。

<div class="fixed-bottom"></div>

下面是我如何在页脚中使用它:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

你可以在这里的职位文档中找到更多信息。

它看起来像高度:100%的“链”被打破在div#main。试着增加高度:100%增加高度,这可能会让你更接近目标。

这很有效

html

<footer></footer>

css

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

使用navbar组件并添加.navbar-fixed-bottom类:

<div class="navbar navbar-fixed-bottom"></div>

增加身体

  { padding-bottom: 70px; }