css布局之Sticky footers布局

这个布局的名字我也是头一次听说，中文名姑且叫粘性的footers吧，这是在学习课程中了解的，现在拿出来分享一下。

先看布局实现的效果：

这是一个弹出层，整体分为上部分的内容区域和底部的关闭按钮，当内容较少时关闭按钮始终在页面底部，当内容较多时出现滚动条，将关闭按钮撑到页面的最下方。

那这种效果如何实现的哪？网上有很多方式，这里讲解一种纯css实现的方法，关键代码如下（stylus语法）：

.detail-wrapper
  min-height 100%
  width 100%
  .detail-main
    margin-top 64px
    padding-bottom 64px
.detail-close
  position relative
  width 32px
  height 32px
  margin -64px auto 0
  clear both
  font-size 32px

其中关键点是给整个弹出层设置最小高度100%，而不是固定值；其次，设置padding-bottom：64px，留出关闭按钮的高度空间；关闭按钮设置上边距为-64px，位置上移。怎样，很简单吧！

 

同理，我们可以根据此种方式实现网页页脚，当内容较少时页脚居于可视区域底部，这里我们需要设置html，body的高度100%