Bootstrap 4 利用 Flex 布局实现固定底部 footer

4年前 ⋅ 0

Bootstrap 4 更加优雅的实现固定底部 Sticky Footer 效果，且不会产生遮盖副作用。

Bootstrap 4 版本默认提供了固定底部的开箱即用样式，直接使用 fixed-bottom 样式即可，但是会带来一些副作用，比如覆盖，理论上可以通过设置额外的 padding 来解决，但是如果是响应式的页面，也就意味着需要在不同的设备尺寸下设置不同的 padding, 比如在 PC 上给 body 需要设置 80px 的 padding 来防止 footer 遮盖内容, 在更小设备的展示上需要更大的 padding, 显得不太优雅。 <div class="fixed-bottom">...</div>

更优雅的解决方案：

直接使用 Bootstrap 4 提供的 Flex 布局支持，来优雅的实现固定底部但是不覆盖的效果。

原理如下：

HTML:

<html>
  <body class="Site">
  <header>Herader Now</header>
  <main class="Site-content">
    Content Here
  </main>
  <footer style="background:red;">Footer</footer>
</body>
</html>

CSS 样式如下

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

最终实现的效果如下： Bootstrap 4 固定底部效果实现

最终的 Bootstrap 4 对应的样式实现如下, 注意 d-flex flex-column min-vh-100 flex-grow-1 这些样式都是 Bootstrap 中默认支持的样式

<html>
  <body class="d-flex flex-column min-vh-100">
  <header>Herader Now</header>
  <main class="flex-grow-1">
    Content Here
  </main>
  <footer style="background:red;">Footer</footer>
</body>
</html>

参考资料： http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 原理详解参见其中中的实例六