我有一个内容在中心的模式。但在顶部,我有一个固定的标题,在滚动内容时保持不动。问题是当内容变大时(css 上的高度设置为 150%),滚动条(mac os 用户请启用滚动条)将内容向左破坏,而另一方面,标题保持在同一位置。
我怎样才能使内容不分解?
HTML:
<div class="modal">
<div class="content">
<div class="header">Some title</div>
<div class="text">
Some text
</div>
</div>
</div>
CSS:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
background-color: black;
}
.modal{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: 9;
overflow-y: auto;
background-color: rgba(255, 255, 255, 0.5);
}
.content{
width: 60%;
position: relative;
margin: auto;
z-index: 4;
height: 150%;
background-color: white;
}
.header{
width: 60%;
background-color: black;
height: 50px;
position: fixed;
}
.text{
padding: 80px 30px;
}
小提琴:
更新
我注意到如果模态变为absolute
而不是fixed
,滚动条不会影响固定元素。有人知道为什么会这样吗?
小提琴:
为什么模态中的滚动条position: fixed
表现不同?
谢谢!