为什么安卓移动端隐藏地址栏时html { height:100% } 样式不生效？

这个现象是安卓端Chromium内核浏览器（Chrome、Opera等）的动态视口设计与百分比高度计算规则共同导致的，具体逻辑如下：

• 初始状态下，你为<html>根元素设置了内联样式height:2000px，远大于移动端默认视口高度，页面可滚动。安卓Chromium内核浏览器滚动时会自动隐藏顶部地址栏，地址栏原本占用的高度会释放给页面，此时页面实际可见区域的高度会比地址栏显示时高大约56px（不同设备地址栏高度略有差异）。
• 当你滚动到地址栏完全隐藏后点击按钮，JS代码将<html>的内联高度置为null，此时<html>会应用样式表中定义的height: 100%规则。这里的100%高度的计算基准是地址栏未隐藏时的初始视口高度，而非当前地址栏隐藏后的实际可见视口高度：这是Chromium移动端的特殊设计，目的是避免地址栏显隐过程中页面百分比元素反复跳动，所以默认会把百分比高度的视口基准锁定为地址栏显示时的高度。
• 你的<body>设置了height:100%，高度继承自<html>，所以此时<body>的总高度等于地址栏未隐藏时的视口高度，比当前实际可见区域高度少了一个地址栏的高度，多出的底部区域就会露出<html>的橙色背景，出现绿色填充不全的现象。

如果要修复这个问题，可以把样式表中html的height:100%替换为height:100dvh，dvh是动态视口高度单位，会自动适配地址栏隐藏后的实际可见高度。

内容的提问来源于stack exchange，提问作者wezten