sticky-footers布局

sticky-footers

html

css

.detail {
 position: fixed;
 top: 0;
 z-index: 100;
 width: 100%;
 height: 100%;
 background-color: rgba(7, 17, 27, 0.8);
overflow: auto;
 .detail-wrapper {
   min-height: 100%;
   .detail-main {
     padding-bottom: 64px;
   }
 }
 .detail-close {
   position: relative;
   width: 32px;
   height: 32px;
   margin: -64px auto 0 auto;
   clear: both;
   font-size: 32px;
   .iconfont {
   }
 }
}

注意

1. 主体内容(detail-main)必须用一个盒子(detail-wrapper)包裹,固定底部的内容(detail-close)必须是在主体内容(detail-main)后面，盒子(detail-wrapper)里面。
2. 盒子(detail-wrapper)设置最小高度是满屏。
3. 主体内容(detail-main)在底部一定要用padding-bottom给底部留一些空隙,这部分空隙是留给固定底部的内容(detail-close)。
4. 固定底部的内容(detail-close)此时是被挤到底部空隙的下面，需要使用margin-top= 负值将固定底部的内容(detail-close)呈现在底部空隙上
   以上就能将固定底部的内容(detail-close)固定在底部了，不管主体内容(detail-main)多长都会固定在主体内容的底部