为什么 html { height:100% } 在隐藏地址栏时不起作用？

Question

我有以下 html:

<html style="height:2000px">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html { height: 100%; background: orange; }
        body { height: 100%; background: green; position: relative; }
        #b { position: absolute; bottom: 0 }
    </style>
</head>
<body>
    <button type="button" id="b">click me</button>
    <script>
        document.getElementById('b').onclick = 
            () => document.documentElement.style.height = null;
    </script>
</body>
</html>

我上传到this link。在 Chrome 或 Android 上的 Opera 中打开它。向下滚动到 'click me' 按钮，确保在向下滚动时隐藏地址栏，然后单击它。你应该得到这个：

这有什么意义 - 为什么它不是一路向下都是绿色的？

Answer 1

https://developers.google.com/web/updates/2016/12/url-bar-resizing解释说<html>上的height:100%给了它和ICB（Initial Containing Block）一样的高度，而ICB的高度就是'smallest possible viewport' ，这是显示地址栏的高度。即使隐藏了地址栏，ICB 的高度也没有改变，解释了我截图底部的所有橙色。

使用“100vh”在地址栏隐藏时为其提供视口高度，并且在地址栏可见时它也不会改变。

所以如果你想让高度适应地址栏可见与否，就必须使用JS。

为什么 html { height:100% } 在隐藏地址栏时不起作用？

Why does html { height:100% } not work when address bar is hidden?

html

mobile

android