饿了么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。