100% body height in landscape overflows due to button bar

StackOverflow https://stackoverflow.com/questions/23505451

  •  16-07-2023
  •  | 
  •  

Question

Consider the following page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        html, body
        {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
</head>
<body>
</body>
</html>

Load it into safari on the iPhone. The page renders at 100% height. Now turn the iPhone to landscape and drag the page upwards. The (bottom) button bar appears and now we're scrolling the page up and down by the amount that the button bar offsets the content. No longer is the page height 100%, and content that should be visible is underneath the button bar, and a vertical scrollbar is evident.

Is it possible to eliminate this annoyance and get true 100% height?

Was it helpful?

Solution 2

Finally solved this by a meta directive in the head section that makes the appearance of the bottom button bar considerably less aggressive. Notice the last part (minimal-ui)

<meta name="viewport" 
 content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui">

OTHER TIPS

Use this script to add a class to html if it is an iPhone:

if((navigator.userAgent.match(/iPhone/i))) {
     $('html').addClass('iphone');
}

Then try making its position as fixed, but only for when the orientation is in landscape, like so:

@media (orientation:landscape) {
    html.iphone > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 480px !important;    /* pretty sure its 480px? */
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top