CSS Sticky footers布局

2017-11-15

在网页设计中，Sticky footers设计是最常见的效果之一。简要概括就是如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容超出当前屏幕高度，页脚块会被内容向下推送而不是被覆盖。

html代码

<div class="detail-warpper clearfix">
     <div class="detail-main">
       <p>我是内容</p>
     </div>
</div>
<div class="detail-close">
     <i>X</i>
</div>

css代码

 <!-- 清除浮动 固定写法 -->
 .clearfix{
   display: inline-block;
 }
 .clearfix:after{
   content: '.';
   display: block;
   height:0;
   line-height: 0;
   clear: both;
   visibility: hidden;
 }
<!-- 使当前层充满屏幕然后 才能使detail-close层定位到下边 -->
.detail-warpper{
   min-height: 100%;
 }
 <!-- 内容层 padding-bottom 为了给底部层留有空间 内容超出时不会覆盖底层detail-close-->
 .detail-warpper .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;
 }

注意 .detail-main 的 padding-bottom 和 .detail-close 的 margin-top相同