Css sticky footer布局

https://www.w3cplus.com/css3/css-secrets/sticky-footers.html

下面要介绍的方法稍复杂，但是兼容性好
在固定定位的.detail下有两个平级盒子，

1. .detail-wrapper是内容的包装系，是需要清除浮动的最小高度是父盒子的高度100%，
2. 里面.detail-main是内容要有padding-bottom，
3. .detail-close要有-margin并且clear：both清除浮动（两盒子平级，上面的盒子最小高度为100%，下面的盒子相当对位，并且margin为负，这样就可以使叉号一直在底部）
   

.detail{
      position: fixed;
      z-index: 100;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      backdrop-filter: blur(10px);
      opacity: 1;
      background: rgba(7, 17, 27, 0.8);
      &.fade-enter-active, &.fade-leave-active{
        transition: all 0.5s;
      }
      &.fade-enter, &.fade-leave-active{
        opacity: 0;
        background: rgba(7, 17, 27, 0);
      }
      .detail-wrapper{
        width: 100%;
        min-height: 100%;
        .detail-main{
          margin-top: 64px;
          padding-bottom: 64px;
          .name{
            line-height: 16px;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
          }
          .star-wrapper{
            margin-top: 18px;
            padding: 2px 0;
            text-align: center;
          }
          .title{
            display: flex;
            width: 80%;
            margin: 28px auto 24px auto;
            .line{
              flex: 1;
              position: relative;
              top: -6px;
              border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            }
            .text{
              padding: 0 12px;
              font-weight: 700;
              font-size: 14px;
            }
          }
          .supports{
            width: 80%;
            margin: 0 auto;
            .support-item{
              padding: 0 12px;
              margin-bottom: 12px;
              font-size: 0;
              &:last-child{
                margin-bottom: 0;
              }
              .icon{
                display: inline-block;
                width: 16px;
                height: 16px;
                vertical-align: top;
                margin-right: 6px;
                background-size: 16px 16px;
                background-repeat: no-repeat;
                &.decrease{
                  .bg-image('decrease_2');
                }
                &.discount{
                  .bg-image('discount_2');
                }
                &.guarantee{
                  .bg-image('guarantee_2');
                }
                &.invoice{
                  .bg-image('invoice_2');
                }
                &.special{
                  .bg-image('special_2');
                }
              }
              .text{
                line-height: 16px;
                font-size: 12px;
              }
            }
          }
          .bulletin{
            width: 80%;
            margin: 0 auto;
            .content{
              padding: 0 12px;
              line-height: 24px;
              font-size: 12px;
            }
          }
        }
      }
      .detail-close{
          position: relative;
          width: 32px;
          height: 32px;
          margin: -64px auto 0 auto;
          clear: both;
          font-size: 32px;
        }
      }