资讯专栏INFORMATION COLUMN

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

Scliang / 2045人阅读

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

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设置了一个最低高度。关键就在于最低高度,如果不用最低高度的话,滚动时还是无法全部显示登录框。

下面是最后的效果。

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

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

相关文章

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

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

    AndroidTraveler 评论0 收藏0
  • 慕课网 饿了么 vue2.0 项目

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

    xuexiangjys 评论0 收藏0
  • CSS多种方式实现底部对齐

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

    klinson 评论0 收藏0

发表评论

0条评论

Scliang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<