Question

我试图让html元素的高度等于视口高度：

*{
    margin: 0;
    padding: 0;
}
html, body{
    height: 100%;
}

<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <script src="js/js.js"></script>
    </head>
    <body>

    </body>
</html>

这就是我所有的html和css。

要达到高度我使用js：

window.addEventListener("load", function(){
    alert(window.innerHeight);
    alert(document.documentElement.offsetHeight);
});

在桌面浏览器上，高度相同。但在safari ipad视口的高度为672，html元素的高度为692像素。为什么？请帮帮我..

Answer 1

状态栏（显示time，battery等。）高度为20px。因此692px html高度是视口的有效高度+状态栏的高度（20px）。

高度100％的html元素safari iOS

1 个答案: