CSS: 页面底部自适应：页面高度不足时，在底部显示；页面高度超出时，随页面滚动

前言

设计很丰满，数据很骨感。有时候我们根据设计师的设计稿去编写页面代码，接入正式的数据后，可能数据不多，渲染后并不足以使得页面占满一屏。而公共的底部元素，需要固定在底部展示；当内容足以撑满一屏时，底部元素又随页面滚动。

常见处理

之前做PC端的项目 ，是使用jQuery编写代码。在页面加载后，通过js代码去判断内容是否超出浏览器的可视高度，根据判断结果，动态地给公共底部元素设置样式。

存在的问题

在vue项目中，获取元素的高度并判断是否添加样式，是不优雅的。

通过js去操作dom元素，性能不佳，导致页面在加载后又重绘。

完美解决方案

Flex布局，可以简便、完整、响应式地实现各种页面布局。（了解更多）

HTML:

<!-- 公共的父元素 -->
<div class="index">
  <div class="container">
    <!-- 你的页面内容 -->
  </div>
  <div class="foot">
    <!-- 需要自适应的底部内容 -->
  </div>
</div>

CSS:

.index{
    /* 设置父元素为flex布局 */
    display: flex;
    /* 设置子元素的排列方向 */
    flex-direction: column;
    /* 设置子元素在该方向上的对齐方式 */
    justify-content: space-between;
 }

如果你有什么疑问或想法，欢迎留言评论，或者扫描下方二维码，与我取得联系~