CSS 万能的 sticky-footer 写法

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推。

我们来看一下效果图：

可以看到不管怎样，关闭按钮，页面内容不够的时候， 关闭按钮 在页面底部。页面内容够长时， 关闭按钮 在内容的最下面，滚到最下面才能看到。

它不是 fixed 在屏幕的底部的，从第二张图片就可以看出来。

那么，是怎样做的呢？

<div v-show="detailshow" class="detail">  <div class="detail-wrapper clearfix">    <div class="detail-main">      <p>{{ seller.bulletin }}</p>      <p>{{ seller.bulletin }}</p>      <p>{{ seller.bulletin }}</p>      <p>{{ seller.bulletin }}</p>      <p>{{ seller.bulletin }}</p>      <p>{{ seller.bulletin }}</p>      <p>{{ seller.bulletin }}</p>      <p>{{ seller.bulletin }}</p>    </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      width: 32px      height: 32px      margin: -64px auto 0 auto      clear: both      font-size: 32px

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