一种完美的css绝对底部

手机端网页有时候会遇到这种布局要求：当内容很少时，footer位于窗口底部，当内容占满整个屏幕时，footer跟在内容末尾，这时候我们就可以用sticky footer

布局前提：footer要和主体内容div同级

        <div class="main-wrap">
            <div class="main-content  clearfix">  <!--clearfix清楚内容区域里的浮动-->
                <p>我是内容区域</p>
                <p>我是内容区域</p>
                <p>我是内容区域</p>
            </div>
        </div>
        <div class="footer">
            我是底部内容
        </div>

样式：

          * {
               margin: 0;
               padding: 0;
           }
           html,body {
               height: 100%;
           }
           .clearfix:after {
               content: '';
               display: block;
               height: 0;
               line-height: 0;
               clear: both;
               overflow: hidden;
               visibility: hidden;
           }
           .main-wrap {
               min-height: 100%;//设置最小高度
               background: #ccc;
           }
           .main-wrap .main-content {
               padding-bottom: 40px;//必须和footer高度相同
           }
           .footer {
               position: relative;
               z-index: 100;
               height: 40px;
               margin:-40px auto 0 auto;//matgin-top必须和footer高度相同    
               clear:both;
               line-height: 40px;
               text-align: center;
               background: rgba(0,0,0,.5);
               color: #fff;
           }

参考：CSS Sticky Footer: 完美的CSS绝对底部