

iOSのSafariで heightを "vh" で指定した場合、実際より一回り大きなサイズになってしまいます。  
例えば、"height:100vh" とすると、表示領域全体より少し大きくなります。  
おそらく、iOSのSafariはアドレスバーの領域も含めて100vhとして計算しているのではないかと思います。

このため、他のブラウザと表示に差がでてしまうのですが、iOSのsafariでvhを意図通りに使う方法はありませんでしょうか。  
ちなみに％は正しく表示されます。

以下はサンプルです。  
height:89vh ですが、iPhone6(iOS9.3.2)で画面全体に表示されます。

[code]

    <!DOCTYPE html>
    <html>
    <head>
        <title>VHTest</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style>
            body,html {
                width: 100%; height: 100%;
                margin: 0; padding: 0;
            }
            #contents {
                position: absolute;
                left: 0; top:0;
                width: 100vw; height: 89vh;
                background-color: darkcyan;
            }
        </style>
    </head>
    <body>
        <div id="contents"></div>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2016-05-24T07:25:22.213
25132
2016-05-24T07:25:22.213
8148
question
ios html css
iOSのSafariでvhによるheightの指定が実際より少し大きくなる