javascript - 在旋转 div 时使用 css 强制大小到视口(viewport)

Question

我无法让旋转的 div 不延伸通过视口(viewport)的底部。在 android 上发生的事情很好，但在 ios 设备上它允许窗口垂直滚动。

div 的 css 如下。

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #030C22;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-touch-action: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.BadOrientation {
    background-image: url( 'assets/preloader/rotateDevice.png' );
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    height: 100%;
    width: 100%;
}

.BadOrientation--Landscape {
    -ms-transform: rotate( 90deg );
    -webkit-transform: rotate( 90deg );
    transform: rotate( 90deg );
}

有问题的 div 是。

<div id="noLandscape" class="BadOrientation BadOrientation--Landscape" style="visibility: hidden; background-size: contain;"></div>

在 Android 浏览器上，这似乎工作正常，用户无法滚动，但在 iOS 设备上，用户可以垂直滚动。我似乎无法让它旋转并 overflow hidden 。

Answer 1

因为你的div是绝对定位的，要隐藏div，容器(body)应该是相对定位的!所以只需添加 position: relative to body 就可以了。

我不确定，但可能还需要这个 css 样式:

html, body {
    height: 100%;
}