在旋轉div時用css強制大小視口

Im無法讓旋轉的div不能延伸通過視口的底部。在android上發生的事情很好，但在iOS設備上，它允許窗口垂直滾動。在旋轉div時用css強制大小視口

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設備上，用戶可以垂直滾動。我似乎不能讓它旋轉，並獲得溢出隱藏。

來源

2017-08-15 Derek Lawrence

的可能的複製[溢出：隱藏不工作（https://stackoverflow.com/questions/3970455/overflow -hidden-not-working） –

是的。謝謝 –

由於您的div絕對定位，爲了隱藏div，容器（身體）應該相對定位！所以只需添加位置：相對於身體，它應該工作。

我不知道這個但這CSS樣式也可能需要：

html, body { 
    height: 100%; 
}

來源

2017-08-15 22:17:21

這樣做的所有我需要做的就是添加位置：相對於身體的CSS。乾杯 –

好吧，這也增加了另一個問題，其中在桌面上divs都有一個寬度和高度爲0.移動工作正常 –

所以你只需要給這種風格：HTML，身體{身高：100％;寬度：100％} @DerekLawrence –

在旋轉div時用css強制大小視口

回答

相關問題