如何将元素的高度固定到视口的“折叠”高度？

Question

我正在寻找跨浏览器（包括IE =＆gt; 10,11）和跨平台方法，将特定高度应用于class="fold"元素，其中fold已定义在CSS中如此：

.fold {
  min-height: calc(100vh - 45px); /* 45px is the height of fixed header on the top */
  max-width: 100vw;
}

够简单吗？但是有一些混蛋！

我想在这里做的只是简单地应用折叠的高度，即区域区域，并且在固定标题下方的元素下方。

在此处查看：https://bubbl.in/

包含cat_image（背景）的div将按预期占据视口高度，但在iOS Safari中，返回的高度略大，因为它包含浏览器的url栏的高度。

问题：

（i） .fold课程适用于桌面Chrome，Safari，Firefox，Opera，Yandex和Edge。它在IE11上工作正常但在IE10上却不太好（尽管它有时在不同的Windows安装上工作）。有没有办法获得更多的向后支持（如IE9 / IE8）？

<击>

只要性能良好，JavaScript就可以了。

（ii）第二个问题是.fold课程适用于iOS Safari，但在iOS Chrome，Firefox和其他一些浏览器（如中国的UC浏览器）上非常适合。我敢肯定，Chrome手机/ Android手机的替代浏览器也存在争议。 将稍微确认一下。 确认。

以下是我对iOS Chrome浏览器的理解，例如：

这与Chrome＆amp; amp; Firefox计算并返回viewport height [参见已知问题中的项目编号11]到CSS渲染引擎。当用户向下滚动页面时，随着浏览器从正常模式进入全屏模式，100vh的值会增加。在iPad上试试吧！

由于“有效”视口高度增加，.fold元素的所述高度上升，浏览器必须重新计算布局并重复多次重绘，导致页面上出现一些重FSL。

我想知道是否有办法阻止重新计算.fold元素的高度并在第一次渲染时将其值固定到视口高度？一次，我想iOS Safari上的已知问题是一个非常理想的功能。

编辑：在顶部插入演示页。