问题描述
我遇到了问题,特别是在我使用 chrome 时。我在我的网站组合中使用了一个模态元素,当用户点击它时,模态的背景只出现在占据整个宽度的上部页面中。好吧,我在模态的 bg 上使用 100vh 并将其设置为 position:fixed,并将模态的内容对齐在中心 (flex)。它在其他浏览器中正常工作,但在 chrome 上无法正常工作。 这是 HTML 的代码片段:
<div class="modal-bg">
<div class="Box-container">
<div class="img-Box">
<img src="">
</div>
<div class="caption">
<p>Some Text here</p>
<div class="btns">
<a href="#">btn-1</a>
<a href="#>btn-2</a>
</div>
</div>
</div>
</div>
这是一个 SCSS 片段:
.modal-bg {
position: fixed;
z-index: 999;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background-color: rgba(0,0.4);
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
transition: visibility 0s,opacity 0.5s ease-in;
.Box-container {
position: relative;
background-color: #f2f2f2;
width: 80%;
height: 60rem;
max-width: 82rem;
min-height: 45rem;
border-radius: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
.img-Box {
margin: 0 .8rem;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
img {
max-width: 53rem;
width: 100%;
}
}
.caption {
position: relative;
width: 100%;
justify-self: flex-end;
font-size: 1.8rem;
color: #000000;
font-weight: normal;
padding: 2rem;
background-color: #ffffff;
.btns {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
margin: 1rem 0;
a {
line-height: 2.4rem;
color: black;
font-size: 1.4rem;
display: flex;
text-transform: uppercase;
padding: .8rem;
background-color: #ffffff;
}
}
}
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)