我创建了一个 Angular 应用,其中边栏是 height: 100%
。但是,在 Chrome for Android 中查看 webapp 时,滚动文档时:
The darkgrey sidebar是 height: calc(100% - 55px)
因此顶部栏通常应始终保持可见,并始终填充顶部栏和最底部之间的剩余空间。
我已经尝试了几种方法来解决这个问题。页脚有 bottom: 0
而这个实际上总是正确呈现。所以这让我尝试使用 top: 55px; bottom: 0
而不是 height: calc(100% - 55px)
。但是从您同时设置 top
和 bottom
的那一刻起,结果与设置高度相同。
有人知道在地址栏出现/消失时让视口(viewport)调整高度的方法吗?
最佳答案
我能够通过以下方式解决这个问题
创建一个 css 变量 (variables.scss)
:root {
--viewport-height: 100%;
}
不要使用 100%
,而是使用 var(--viewport-height)
height: calc(100% - 55px);
成为
height: calc(var(--viewport-height) - 55px);
然后绑定(bind)到visualViewport.resize
事件(这里必须使用addEventListener
)
if (!serverSide) {
visualViewport.addEventListener('resize', () => {
document.documentElement.style.setProperty('--viewport-height', `${visualViewport.height}px`);
});
}
确保没有为高度属性设置过渡。
all major browsers 支持 CSS 变量.
关于android - 臭名昭著的高度 :100% issue on chrome for android - address bar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67936359/