如果我调整页面大小,元素溢出到视口之上,我无法向上滚动查看它们。我找到了一个带有解决方案的问题,但它没有起作用。我有两个“核心”的不可见div和一个包含所有内容的div元素。
“container” div的存在是因为我试图解决这个问题。
.container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 500;
}
.main-content {
display: flex;
width: 100%;
height: 100%;
overflow: auto;
margin: auto;
}
.window {
/*height: 16vw;
width: 27vw;*/
display: flex;
height: 550px;
width: 800px;
position: absolute;
top: 50%;
left: 50%;
border: solid blue 5px;
background-color: black;
margin: auto;
overflow: hidden;
}
<div class="container">
<div class="main-content">
<div class="window" id="window1" style="transform: translate(-10%, -90%);">
<div class="header" id="window-header">
<img src="https://picsum.photos/800/550">
<p class="title">navigation</p>
</div>
</div>
</div>
</div>
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
感谢@TylerH解决了这个问题。问题出在我的HTML中的transform样式上。删除它后,它可以正确滚动。从我看到的情况来看,它似乎会偏移滚动,并且好像是移动整个页面而不仅仅是元素。感谢大家的帮助,但我已经解决了。