臭名昭著的高度：Android 版 chrome 上的 100% 问题 - 地址栏

Posted 2023-02-23

【中文标题】臭名昭著的高度：Android 版 chrome 上的 100% 问题 - 地址栏

【英文标题】：Infamous height:100% issue on chrome for android - address bar

【发布时间】：2021-08-28 08:37:19

【问题描述】：

我创建了一个边栏为height: 100% 的角度应用程序。但是，在 Chrome for android 中查看 web 应用程序时，滚动文档时：

镀铬地址栏轻轻向上滑动 100% 实际尺寸保持不变，直到您触摸结束

The darkgrey sidebar 是 height: calc(100% - 55px)，因此顶部栏通常应始终保持可见，并始终填充顶部栏和最底部之间的剩余空间。

我已经尝试了几种方法来解决这个问题。页脚有bottom: 0，实际上这个总是正确渲染的。所以这让我尝试使用top: 55px; bottom: 0 而不是height: calc(100% - 55px)。但是从设置top 和bottom 的那一刻起，结果与设置高度相同。

有人知道在地址栏出现/消失时让视口调整高度的方法吗？

【问题讨论】：

你试过用100vh代替100%作为高度吗？

是的，我有，但是侧边栏隐藏在 android back/home/active apps 按钮栏后面。所以底部 50px 是隐藏的，无法访问。

我也尝试过使用min-height: -webkit-fill-available;，但这让用户体验更加糟糕......

vh 无论是否显示地址栏都是一样的：developers.google.com/web/updates/2016/12/url-bar-resizing。所以肯定不是vh...

【参考方案1】：

我能够通过

解决这个问题

创建一个css变量（variables.scss）

:root 
  --viewport-height: 100%;

不要使用100%，而是使用var(--viewport-height)

height: calc(100% - 55px);

变成

height: calc(var(--viewport-height) - 55px);

然后绑定到visualViewport.resize 事件（此处必须使用addEventListener）

if (!serverSide) 
  visualViewport.addEventListener('resize', () => 
    document.documentElement.style.setProperty('--viewport-height', `$visualViewport.heightpx`);
  );

确保没有为 height 属性设置过渡。

all major browsers 支持 CSS 变量。

VisualViewport docs 链接来自文档Demo 和source code Commit reference

【讨论】：

请解释55px

是的，这是我的页眉高度。侧边栏填充标题和窗口底部之间的空间

我必须补充一点，这确实适用于地址栏，但不适用于同一标签组中有多个标签时显示的标签条。 visualViewport.height 似乎没有考虑到这个标签条。

惊人的答案！