h5页按钮组固定在底部

h5页固定在底部的按钮

  1. 问题
  • 单独使用fixed布局,会被键盘顶上去
  • 单独使用flex布局,在上划页面会被滑动脱离固定底部
  1. 方案
  • 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;
    }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容