当前位置: 首页 > Web前端 > HTML5

flex布局的滚动问题和无法显示所有子元素的解决方法

时间:2023-04-05 00:33:00 HTML5

flex布局使用起来非常方便,很容易实现水平和垂直居中的需求。不过前不久我在登录全屏弹窗蒙版的时候,遇到了flex布局滚动的问题,所以记录在这里。问题重现理想情况下当然是如下状态,网页高度适中,登录框纵横居中。但是,当调整浏览器的高度时,问题就出现了。可以看到,当网页的高度小于登录框的高度时,即使滚动条已经在顶部,也看不到登录框的顶部。如果登录框右上角有个关闭按钮,也是看不见的。问题代码部分html

登录框

sectioncss.mask{width:100%;高度:100%;背景:rgba(0,0,0,0.4);显示:弹性;证明内容:居中;对齐项目:居中;溢出:自动;}.content{宽度:400px;高度:600px;背景:#fff;边界半径:10px;显示:弹性;证明内容:居中;align-items:center;}解决方案html

登录框

在html里面,多了一个div,用来包裹需要滚动的元素。css.mask{宽度:100%;高度:100%;背景:rgba(0,0,0,0.4);/*显示:弹性;证明内容:居中;对齐项目:居中;*/overflow:auto;}.content-wrap{width:100%;最小高度:700px;显示:弹性;证明内容:居中;align-items:center;}在css中,删除屏蔽的flex代码并为新的div设置一个最小高度。关键在于最小高度。如果不使用最小高度,滚动时登录框无法完全显示。下面是最终效果。