摘要:布局使用起来非常方便,对于水平垂直居中的需求,很容易就能实现。但是前不久,在做全屏弹窗遮罩登录的时候,遇到了布局滚动的一个问题,在此记录一下。关键就在于最低高度,如果不用最低高度的话,滚动时还是无法全部显示登录框。
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布局滚动的一个问题,在此记录一下。 问题重现 理...
饿了么 vue 项目总结 项目效果预览 ele效果预览项目源码地址 ele源码跟着慕课网黄轶老师 敲饿了么 vue 项目 作者项目源代码地址 项目完成之后 npm run build 这本来是写在最后面一段的,我现在把他写在了最前面,方便我们事先知道,整个项目做完之后是什么样子的 项目完成之后在 根目录 下 npm run build (就是 npm run dev 的那个目录) 会在根目录...
摘要:我在项目中刚开始就是计算来实现的,这种方式实现起来就是感觉不爽,每推送一条数据过来就要进行计算。 CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果:showImg(https://segmentfault.com/img/bVbg8sb?w=328&h=372);showImg(https://segmentfault.com/img/bVbg8sc?w=329&h...
摘要:我在项目中刚开始就是计算来实现的,这种方式实现起来就是感觉不爽,每推送一条数据过来就要进行计算。 CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果:showImg(https://segmentfault.com/img/bVbg8sb?w=328&h=372);showImg(https://segmentfault.com/img/bVbg8sc?w=329&h...
阅读 1608·2019-08-30 15:54
阅读 2351·2019-08-30 15:52
阅读 1941·2019-08-29 15:33
阅读 3017·2019-08-28 17:56
阅读 3200·2019-08-26 13:54
阅读 1645·2019-08-26 12:16
阅读 2416·2019-08-26 11:51
阅读 1605·2019-08-26 10:26