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