Derek Lawrence Derek Lawrence -3 years ago 97
CSS Question

Force size to viewport with css while rotating div

Im having trouble getting a rotated div to not extend passed the bottom of the viewport. What's happening is fine on android but on ios devices it allows the window to scroll vertically.

The css for the div is as follows.

* {
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 );
}


the offending div is.

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


On android browsers this seems to work fine and users are not able to scroll but on ios devices the user can scroll vertically. I cant seem to get it to rotate and get the overflow to be hidden.

Answer Source

As your div is absolutely positioned, to hide the div, the container (the body) should be relatively positioned! So just add position: relative to body and it should work.

I'm not sure about this but this css styles also may be needed:

html, body {
    height: 100%;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download