h5页固定在底部的按钮

1. 问题

• 单独使用fixed布局，会被键盘顶上去
• 单独使用flex布局，在上划页面会被滑动脱离固定底部

2. 方案

• flex布局+fixed布局解决

  
  
  如图所示

    <div class="wrap">
        <div class="content">
        </div>

        <div class="footer>
        </div>
    </div>

    .wrap{
        display:flex;
        flex-direction:column;
        height:100%;
    }
    .footer{
        height:1rem;
        width: 100%;
        position: fixed;
        bottom:0;
        left:0;
    }

    .content{
        overflow-y:auto ;
        flex-shrink: 1;
        flex-grow: 1;
    }