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