概况:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送
引用: http://www.w3cplus.com/css3/css-secrets/sticky-footers.html © w3cplus.com
套路:主要为三层
<div> <div class="detail-wrapper clearfix"> <!--内容--> <div class="detail-main">啦啦啦啦</div> </div> <!--页脚--> <div class="detail-关闭">关闭</div> </div>
.clearfix{ display:inline-block; } .clearfix:after{ display:block; content:"."; height:0; line-height:0; clear:both; visibility:hidden; } .detail-wrapper{ min-height:100%;/*最小高度要问视窗高度才可以铺满窗口*/ } .detail-main{ padding-bottom:64px;/*pad-bot为了给底部close留出空间*/ } .detail-close{ position:relative; width:32px; height:32px; marginn:-64px auto 0 auto;/*当前div上移64px*/ clear:both; font-size:32px; }