移动端 H5 弹出层 fixed 内容可滚动

<div class="alert_wapper">
    <div class="wapper">
        <!--内容 --> 
    </div>
</div>

<style>
    .alert_wapper{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.70);
        z-index: 99;
        overflow: auto;
    }
    .wapper{
        display: inline-block;
        &:after {
            display: block;
            content: ".";
            height: 0;
            line-height: 0;
            clear: both;
            visibility: hidden;
        }
    }
</style>

内容会随着wapper的高度 向正常页面滚动一样

posted @ 2018-03-29 10:02  ZhenJie.W  阅读(321)  评论(0编辑  收藏  举报