饿了么webapp之css footer的实现

效果图：

如果内容的高度没有屏幕大小这么高，关闭按钮在底部这个位置。如果内容高度超过屏幕大小，会有会有滚动条并且关闭按钮始终位于页面最顶部。

实现方法

<div class="detail" v-show="isShow">
   <div class="detail-wrapper clearfix">
      <div class="detail-main">
          <slot>none</slot>
      </div>
    </div>
    <div class="detail-close">
          <i class="icon-close"></i>
        </div>
  </div>

.detail
    position:fixed
    z-index:100
    top: 0
    left: 0
    width:100%
    height:100%
    overflow:auto
    background: rgba(7, 17, 27, 0.8)
    .detail-wrapper
        min-height:100%
        .detail-main
          margin-top:64px
          padding-bottom:64px
    .detail-close
      position:relative
      margin:-64px auto 0 auto
      width:32px
      height:32px
      clear:both
      font-size:32px

内容区域为一个盒子，关闭按钮为一个盒子，要给内容区域设置它的最小高度为屏幕的100%，那么此时关闭按钮会始终位于内容区域下方，内容区域的padding-bottom设置为64px是为了给关闭按钮留地方。然后margin:-64px auto 0 auto，关闭按钮就向上移，始终位于屏幕底部的上64px。