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

最新推荐文章于 2024-05-07 14:01:16 发布

njit_peiyuan

最新推荐文章于 2024-05-07 14:01:16 发布

阅读量1.8k

点赞数 2

原文链接：https://segmentfault.com/a/1190000016201322

版权

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; }

弹窗居中对齐效果

图片描述

博客地址

njit_peiyuan

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
flex子项内容超出flex容器范围，flex子项顶部内容被遮住

flex子项内容超出flex容器范围，flex子项顶部内容被遮住我们经常用flex布局方式来实现垂直居中对齐，但是当内容高度是动态变化且超出了flex容器的高度时，无法滚动到顶部，导致顶部的内容无法访问。以往的弹窗效果都是用插件来实现，这次一个简单的页面不想引入那么多插件，自己动手丰衣足食。弹窗要求：上下左右居中对齐；需要考虑...
复制链接

扫一扫

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

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

“相关推荐”对你有帮助么？