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

Question

考虑以下页面：

<!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>

将其加载到iPhone上的野生动物园中。 页面以100％的高度呈现。 现在，将iPhone放到横向并向上拖动页面。 出现（底部）按钮栏，现在我们上下滚动页面，使按钮栏偏移内容。 页面高度不再是100％，按钮栏下方应显示的内容是可见的，并且垂直滚动条可见。

是否有可能消除这种烦恼并获得100％的真实身高？

Answer 1

如果是iPhone，请使用以下脚本将类添加到html ：

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

然后尝试将其位置固定为固定，但仅当方向为横向时才如此，如下所示：

@media (orientation:landscape) {
    html.iphone > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 480px !important;    /* pretty sure its 480px? */
    }
}

Answer 2

最终通过在头部的meta指令解决了这一问题，该指令使底部按钮栏的外观更具攻击性。 注意最后一部分（ 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