经典的css sticky footer 布局

【sticky footer】 指的就是一种网页效果： 如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。

实现效果如下图。

实现——
header.vue中首先创建3个div层。detail-wrapper,detail-main,detail-close

    <div v-show="detailShow" class="detail">
      <div class="detail-wrapper clearfix">//清除浮动，当内容不足时，撑开高度min-height: 100%
        <div class="detail-main">//内容区
        </div>
      </div>
      <div class="detail-close">//底部关闭图标
        <span class="icon-close"></span>
      </div>

clearfix为通用清除浮层样式代码，一般应用在含有浮动结构的代码中。例如这里的sticky footer。
base.styl中的clearfix代码为：

.clearfix
  display: inline-block
  &:after
    display: block
    content: "."
    height: 0
    line-height: 0
    clear: both
    visibility: hidden

header.vue中的style区域代码为：

  .detail
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: rgba(7, 17, 27, 0.8)
    z-index: 100
    overflow: auto//内容足够时下滑。
    .detail-wrapper
      min-height: 100%//当内容不足时，撑开高度min-height: 100%
      .detail-main
        margin-top: 64px//这里顶部有128px的距离，所以用margin-top,没有可以不加。
        padding-bottom: 64px//给底部关闭图标层预留空间，一定要有。
    .detail-close
      position: relative
      width: 32px
      height: 32px
      margin: -64px auto 0 auto//-负margin要与前面内容层里预留的一致。左右两边auto保持居中。
      clear: both
      font-size: 32px