我正在构建一个全屏模式,我试图在内容小于屏幕时将其垂直居中,并在高度大于容器高度时从顶部开始并允许滚动.我正在尝试使用 position:fixed
将容器定位在屏幕上,并使用 display:flex; align-items:center;
使内部 div 居中。当容器比内部 div 短时,内部 div 的顶部被切掉,即使我使用:overflow-y:scroll
。
这是我的代码:
<div class="modal">
<div class="inner-w">
hello world
<div class="long-box">
</div>
</div>
</div>
.modal {
position: fixed;
bottom: 70px;
top: 0;
left:0;
right: 0;
display: flex;
align-items: center;
padding: 15px;
overflow: scroll;
}
.inner-w {
margin: 50px 0;
width: 100%;
}
.long-box {
height: 400px;
width: 100%;
border: 1px solid brown;
}
这是一个 jsfiddle:https://jsfiddle.net/benCarp/bh2Lfpo4/18/#&togetherjs=aKbe8NLJSR
最佳答案
添加到 .modal{flex-direction-column;} 现在你可以移除边距了
.modal {
position: fixed;
bottom: 70px;
top: 0;
left:0;
right: 0;
display: flex;
flex-direction:column;
align-items: center;
padding: 15px;
overflow: scroll;
}
.inner-w {
width: 100%;
}
.long-box {
height: 400px;
width: 100%;
border: 1px solid brown;
}
<div class="modal">
<div class="inner-w">
hello world
<div class="long-box">
</div>
</div>
</div>
关于html - 当使用 `position:fixed;` 和 `display: flex;` 的 css 组合时,内部元素的顶部被切掉并且无法访问,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55635089/