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

【问题标题】：Why does html { height:100% } not work when address bar is hidden?为什么隐藏地址栏时 html { height:100% } 不起作用？
【发布时间】：2021-10-31 12:16:03
【问题描述】：

我有以下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。在 Android 上的 Chrome 或 Opera 中打开它。向下滚动到“单击我”按钮，确保地址栏在您向下滚动时隐藏，然后单击它。你应该得到这个：

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

【问题讨论】：

在 google chrome 开发工具-设备工具栏中完美运行。你在手机上使用什么浏览器？解决方案是什么？
当然，因为开发工具没有地址栏 - 请参阅问题标题。我在 Android、Galaxy S9 上使用 Chrome 或 Opera。
@wezten 它对我来说非常好here look。
那是什么浏览器和操作系统？你确定你点击了“点击我”按钮吗？此外，请确保地址栏在页面加载后最初显示。
Chrome，安卓。我也单击了按钮，但结果相同。是的，地址栏最初是显示的。

标签： android html mobile

【解决方案1】：

https://developers.google.com/web/updates/2016/12/url-bar-resizing 解释说 height:100% on <html> 赋予它与 ICB（初始包含块）相同的高度，而 ICB 的高度是“可能的最小视口”，即带有地址的高度酒吧展示。即使地址栏被隐藏，ICB 的高度也不会改变，这解释了我截图底部的所有橙色。

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

所以如果你希望高度适应地址栏是否可见，必须使用JS。

【讨论】：