根据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>自定义元素上)。

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

对于Sticky Footer，我们在HTML中使用了两个DIV来实现基本的Sticky Footer效果。这样写:

HTML

<div class="container"></div>

<div class="footer"></div>

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

页脚高度匹配wrap元素的底部缩进的大小。

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

bootstrap是这样做的:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

只需使用页面源代码，您就应该能够看到。不要忘记<div id="wrap">在顶部。

使用Bootstrap 3.6.6测试。

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}