gpt4 book ai didi

html - 不覆盖全屏 iPhone

转载 作者:太空宇宙 更新时间:2023-11-04 09:55:34 25 4
gpt4 key购买 nike

我正在尝试制作一个在屏幕上延伸的 div,用户需要点击它才能关闭。它适用于计算机和 Android 手机,但不适用于较小的 iPhone。

代码如下:

.hidden-overflow {
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150%;
z-index: 10;
background-color: #FFF228;
}
.overlay.ng-hide-add {
transition: .8s linear all;
height: 100%;
overflow: hidden;
}
.overlay.ng-hide-add-active {
height: 0;
}
<div ng-if="showOverLay">
<div class="overlay" ng-init="overlayShow()" ng-click="overlayRemove()" ng-hide="hideOverlay">
<h1 class="header" data-translate>Welcome!</h1>
<h2 class="header" data-translate>JADA JADA JADA <br>Click to continue</h2>
</div>
</div>

似乎它的溢出不起作用。我该如何解决这个问题?

最佳答案

由于您已经在使用 absolute 定位元素,我会完全忽略高度和宽度,并使用定位将图像拉伸(stretch)到整个页面:

html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
#overlay {
background: tomato;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="overlay"></div>
</body>


更进一步,您可能希望叠加层不会在较长的页面上滚动。为此,请使用 position:fixed。这唯一的缺点是仍然启用滚动;因此,如果用户滚动,叠加层看起来是正确的,但一旦他们点击它,他们将最终出现在页面中间。解决这个问题需要一个超出这个问题范围的 JS 解决方案。

关于html - 不覆盖全屏 iPhone,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38762030/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com