flex子项内容超出flex容器范围,flex子项顶部内容被遮住

我们经常用flex布局方式来实现垂直居中对齐,但是当内容高度是动态变化且超出了flex容器的高度时,无法滚动到顶部,导致顶部的内容无法访问。

以往的弹窗效果都是用插件来实现,这次一个简单的页面不想引入那么多插件,自己动手丰衣足食。

弹窗要求:

  • 上下左右居中对齐;
  • 需要考虑到内容超过一屏或者不够一屏的伸缩性;

这些都是简单货,代码如下: jsFiddle效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex-pop</title>
    <style>
        *{ margin: 0; border: 0; padding: 0;}
        html,body{ height: 100%;}
        .popWrap{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding: 20px 0; background: rgba(0,0,0,.8);
            display: flex; justify-content: center; align-items: center; box-sizing: border-box; overflow: auto;}
        .popContainer{ width: 80%; border-radius: 5px; background: #fff; padding: 20px; color: #555; line-height: 1.5; }
        .btnBlock{ display: block; margin-top: 20px; width: 100%; height: 40px; line-height: 40px; color: #fff;
            font-size: 14px; background: #007ACC; border-radius: 5px; }
    </style>
</head>
<body>
    <div class="popWrap">
        <div class="popContainer">
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <button class="btnBlock">确定</button>
        </div>
    </div>
</body>
</html>

图片描述

缺陷:

内容已经超过了一屏,很明显最上面的内容是03,并不是实际最顶部的内容;
如果把内容删掉一些,会发现是位置是居中的,效果正常。
问题是在内容超出一屏的时候就无法看到最顶部的内容。

解决方法:

给flex子项设置margin:auto;,也就是

.popContainer{ margin: auto; }

弹窗居中对齐效果

图片描述

博客地址

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐