哪项CSS属性可控制安卓Chrome浏览器URL栏自动隐藏

首先纠正一个常见误区：不存在专门控制安卓Chrome地址栏自动隐藏的CSS属性。这个效果是Chrome移动端的内置默认交互，唯一触发前提是页面存在基于html/body根节点的原生纵向滚动，一旦根节点滚动被禁用或转移，这个效果会直接失效，调整其他CSS属性都无法触发。

问题根源 #

你当前给主div设置height: 100vh是导致效果失效、内容裁切的核心原因：

• 移动端Chrome里的100vh是固定计算值，取的是地址栏完全收起后的最大视口高度，不会跟着地址栏显隐动态变化。当地址栏处于显示状态时，实际可视区域高度比100vh小，固定100vh高度的容器底部必然会被地址栏裁切。
• 如果你同时给这个主div加了overflow: auto实现内部滚动，相当于把整个页面的滚动上下文从根节点转移到了内部div上，Chrome检测不到根节点的原生滚动行为，就不会触发向上滚动隐藏地址栏的逻辑，地址栏会一直占位，进一步加剧底部裁切问题。

修复步骤 #

1. 恢复根节点原生滚动能力
   删掉主div上的height: 100vh、overflow: auto/scroll这类把滚动锁在容器内部的属性，同时不要给html、body标签设置overflow: hidden或者固定高度，让页面内容能自然撑开根节点滚动条。基础重置样式可参考：

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

   只要页面内容高度超过当前可视视口高度，用户向上滚动时Chrome就会自动隐藏地址栏，不需要额外添加任何控制属性。

2. 替换固定视口单位解决内容裁切
   实现全屏高度容器不要用固定的100vh，改用动态视口单位dvh，这个单位会实时根据地址栏的显隐状态计算当前可视区域高度，从根本上避免裁切问题：

   .main-div {
     min-height: 100vh; /* 旧版本浏览器降级兼容 */
     min-height: 100dvh;
   }
   

   注意这里用min-height不要写死height，保证内容超过一屏时容器能正常拉长，不会卡住页面滚动。

常见踩坑提醒 #

• 如果你用JS阻止了根节点的默认滚动事件、或者通过transform/position: fixed完全接管了滚动逻辑，Chrome同样识别不到原生滚动行为，地址栏不会自动隐藏
• 如果页面内容高度刚好等于可视视口高度、没有纵向滚动空间，地址栏也不会触发隐藏逻辑

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture