100％的车身高度因按钮栏而溢出

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. 将其加载到iPhone上的野生动物园中。 The page renders at 100% height. 页面以100％的高度呈现。 Now turn the iPhone to landscape and drag the page upwards. 现在，将iPhone放到横向并向上拖动页面。 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. 页面高度不再是100％，按钮栏下方应显示的内容是可见的，并且垂直滚动条可见。

Is it possible to eliminate this annoyance and get true 100% height? 是否有可能消除这种烦恼并获得100％的真实身高？

Answer 1

Use this script to add a class to html if it is an iPhone: 如果是iPhone，请使用以下脚本将类添加到html ：

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? */
    }
}

Answer 2

Finally solved this by a meta directive in the head section that makes the appearance of the bottom button bar considerably less aggressive. 最终通过在头部的meta指令解决了这一问题，该指令使底部按钮栏的外观更具攻击性。 Notice the last part ( minimal-ui ) 注意最后一部分（ minimal-ui ）

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

100％的车身高度因按钮栏而溢出

问题描述

2 个解决方案

解决方案1
0 2014-05-06 23:16:46

解决方案2
0 已采纳 2014-05-08 18:30:58

100％的车身高度因按钮栏而溢出

问题描述

2 个解决方案

解决方案1 0 2014-05-06 23:16:46

解决方案2 0 已采纳 2014-05-08 18:30:58

解决方案1
0 2014-05-06 23:16:46

解决方案2
0 已采纳 2014-05-08 18:30:58