flex布局滚动问题，子元素无法全部显示的解决办法

AndroidTraveler 发布于2019-08-02 10:34 / 3454人阅读

摘要：布局使用起来非常方便，对于水平垂直居中的需求，很容易就能实现。但是前不久，在做全屏弹窗遮罩登录的时候，遇到了布局滚动的一个问题，在此记录一下。关键就在于最低高度，如果不用最低高度的话，滚动时还是无法全部显示登录框。

flex布局使用起来非常方便，对于水平垂直居中的需求，很容易就能实现。但是前不久，在做全屏弹窗遮罩登录的时候，遇到了flex布局滚动的一个问题，在此记录一下。

问题重现

理想情况下，当然是下面的状态，网页的高度适中，登录框垂直水平居中。

但是，当调整浏览器的高度时，问题就出现了。

可以看到，当网页的高度比登陆框的高度小时，哪怕滚动条已经在顶部了，也看不到登录框的顶部，如果登陆框的右上角有关闭按钮的话，那么也是看不见的。

问题代码

部分html

 
    
        登录框

部分css

.mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
}
.content {
    width: 400px;
    height: 600px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

解决方法

html

html里面，多了一个div，将需要滚动的元素包起来。

css

 .mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* display: flex;
    justify-content: center;
    align-items: center; */
    overflow: auto;
}
.content-wrap {
    width: 100%;
    min-height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
}

css里面，将遮罩的flex代码去掉了，给新的div设置了一个最低高度。关键就在于最低高度，如果不用最低高度的话，滚动时还是无法全部显示登录框。

下面是最后的效果。

云服务器 GPU云服务器解决阿里云服务器无法访问80端口的问题的解决办法微软的解决办法 use的解决办法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52441.html

flex布局滚动问题，子元素无法全部显示的解决办法

摘要：布局使用起来非常方便，对于水平垂直居中的需求，很容易就能实现。但是前不久，在做全屏弹窗遮罩登录的时候，遇到了布局滚动的一个问题，在此记录一下。关键就在于最低高度，如果不用最低高度的话，滚动时还是无法全部显示登录框。 flex布局使用起来非常方便，对于水平垂直居中的需求，很容易就能实现。但是前不久，在做全屏弹窗遮罩登录的时候，遇到了flex布局滚动的一个问题，在此记录一下。问题重现理...

Scliang 2019-08-29 15:33 评论0 收藏0
慕课网饿了么 vue2.0 项目

饿了么 vue 项目总结项目效果预览 ele效果预览项目源码地址 ele源码跟着慕课网黄轶老师敲饿了么 vue 项目作者项目源代码地址项目完成之后 npm run build 这本来是写在最后面一段的，我现在把他写在了最前面，方便我们事先知道，整个项目做完之后是什么样子的项目完成之后在根目录下 npm run build （就是 npm run dev 的那个目录）会在根目录...

xuexiangjys 2019-08-20 18:10 评论0 收藏0
CSS多种方式实现底部对齐

摘要：我在项目中刚开始就是计算来实现的，这种方式实现起来就是感觉不爽，每推送一条数据过来就要进行计算。 CSS实现底部对齐效果因公司业务要求需要实现如下图中红色区域的效果：showImg(https://segmentfault.com/img/bVbg8sb?w=328&h=372);showImg(https://segmentfault.com/img/bVbg8sc?w=329&h...

Me_Kun 2019-08-02 16:06 评论0 收藏0
CSS多种方式实现底部对齐

摘要：我在项目中刚开始就是计算来实现的，这种方式实现起来就是感觉不爽，每推送一条数据过来就要进行计算。 CSS实现底部对齐效果因公司业务要求需要实现如下图中红色区域的效果：showImg(https://segmentfault.com/img/bVbg8sb?w=328&h=372);showImg(https://segmentfault.com/img/bVbg8sc?w=329&h...

klinson 2019-08-30 15:54 评论0 收藏0