【发布时间】：2018-04-12 20:19:44
【问题描述】：
在 Mobile Safari 上使用 100vh 不会考虑下部导航栏的高度。
以下面的示例截图为例。为了显示类似应用程序的页脚，我需要手动（并且以一种丑陋的方式，请参见下面的代码）从容器的高度中减去 74px。不这样做只会将我的页脚隐藏在移动 Safari 的导航页脚下。
有没有一种通用且干净的方法来解决这个问题？
我使用以下代码解决了这个问题。这对我来说很难看。用户代理推断出平台/浏览器和硬编码偏移以摆脱原生行为。相信我的解决方案感觉不好：
编辑顺便说一句，这段代码在我的 Angular4“响应式、移动优先和渐进式网络应用”（流行语的力量）的 ngAfterViewInit() 方法中运行。
const wrapper:any = document.getElementsByClassName('hack-to-fix-ios-height')[0];
if(wrapper && this.iOS()){
let height = wrapper.offsetHeight;
height -= 74;
// Mobile Safari fix for footer nav
this.renderer.setStyle(wrapper, 'height', height + 'px');
}
【问题讨论】：
标签： css web-applications responsive-design mobile-safari