我通常熟悉使用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>自定义元素上)。

其他回答

这现在包含在Bootstrap 2.2.1中。

引导3.倍

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

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

引导4.倍

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

别忘了添加body {padding-bottom: 70px;}或以其他方式覆盖页面内容。

文档:http://getbootstrap.com/components/ # navbar-fixed-bottom

最简单的技术可能是使用Bootstrap navbar-static-bottom,并将主容器div设置为高度:100vh(新的CSS3视图端口百分比)。这将把页脚冲洗到底部。

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

另一种可能的解决方案是使用媒体查询

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}

Bootstrap v4+溶液

这里有一个解决方案,不需要重新考虑HTML结构或任何涉及填充的额外CSS技巧:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

请注意,此解决方案允许页脚具有灵活的高度,这在为多个屏幕尺寸设计页面时特别有用,在收缩时使用内容包装。

为什么会这样

style="height:100%;" makes the <html> tag take the whole space of the document. class d-flex sets display:flex to our <body> tag. class flex-column sets flex-direction:column to our <body> tag. Its children (<header>, <main>, <footer> and any other direct child) are now aligned vertically. class h-100 sets height:100% to our <body> tag, meaning it will cover the entire screen vertically. class flex-grow-1 sets flex-grow:1 to our <main>, effectively instructing it to fill any remaining vertical space, thus amounting to the 100% vertical height we set before on our <body> tag.

工作演示在这里:https://codepen.io/maxencemaire/pen/VwvyRQB

有关flexbox的更多信息,请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

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

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

增加身体

  { padding-bottom: 70px; }