Question

我试图制作一个延伸到屏幕上的div，用户需要点击才能解散。它适用于计算机和Android手机，但不适用于较小的iPhone手机。

以下是代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

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

＆＃13;

html {
  height: 100%;
}
body {
  min-height: 100%;
  position: relative;
}
#overlay {
  background: tomato;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

＆＃13;

<body>
  <div id="overlay"></div>
</body>

＆＃13;

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

不覆盖全屏iPhone

1 个答案: