CSS Sticky footers 布局

部分代码

1
2
3
4
5
6
7
8
<div>        
      <div class="detail-wrapper clearfix">
        <div class="detail-main"></div>
      </div>
      <div class="detail-close">
        <i class="icon-close"></i>
      </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
/* stylus 代码 */ 
.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

效果：

  1. 在页面主体内容不够多时 将页脚放在底部

    图一

  2. 在页面主体内容够多时 将页脚放在主体内容后面

    图二

原理简析：主体内容设置paddin-bottom 值为x，页脚将margin-top 的值设置成-x,使页脚沉入页面主体内容的padding-bottom中。因为主体内容 设置了最小高度，所以当其中内容不够多时它的高度和视口高度一样，所以页脚会和padding-bottom一样固定在下方。内容超过视口高度时，页脚就会被挤下去。

参考：CSS秘密花园： Sticky footers