如何在页面内容下方的bootstrap 4中推送固定底部页脚？

Question

当没有内容或内容少于整页时，我在 boostrap 4 中使用固定底部类将页脚保持在底部。下面是来自 bootstrap 4 的固定底部类的 CSS：

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

我的页脚看起来像：

<footer class=" fixed-bottom  container">
  <div class="row">
    <div class="col-md-5">
      some content
    </div>
    <div class="col-md-7">    
      some content
    </div>
  </div>
</footer>

页脚的 CSS：

footer {
    margin-top: 25px;
}

页脚很好地位于底部，但是如果用户单击加载的内容不适合页面空白区域的链接，则会出现滚动条并且页脚仍然粘在内容的顶部，从而掩盖了内容。如何使用 CSS 将页脚移动到内容下方，同时将类固定在页脚底部？当用户滚动到页面底部时，页脚应该变得可见。

请注意，页脚内容比页面内容宽，因此尝试使用 z 索引将不起作用。

Answer 1

将你的 CSS 更新为此。

.fixed-bottom {
    position: fixed;
    margin: auto;
    height: 100px;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

消除

footer {
    margin-top: 25px;
}