部分代码12345678<div> <div class="detail-wrapper clearfix"> <div class="detail-main"></div> </div> <div class="detail-close"> <i class="icon-close"></i> </div></div>
|
|
效果:
在页面主体内容不够多时 将页脚放在底部
在页面主体内容够多时 将页脚放在主体内容后面
原理简析:主体内容设置paddin-bottom 值为x,页脚将margin-top 的值设置成-x,使页脚沉入页面主体内容的padding-bottom中。因为主体内容 设置了最小高度,所以当其中内容不够多时它的高度和视口高度一样,所以页脚会和padding-bottom一样固定在下方。内容超过视口高度时,页脚就会被挤下去。