大家好，又见面了，我是你们的朋友全栈君。
100vh带来的问题
在CSS中，视口单位（Viewport units）听起来不错。如果要设置一个元素的样式使它占据整个屏幕的高度，那么你可以设置height: 100vh，这样你就拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可惜的是，事实并非如此。100vh在移动浏览器中以一种微妙但基本的方式被破坏，使其几乎无用。最好避免使用100vh，而应该通过javascript设置高度的方式来获得完整的视口体验。
核心问题是移动浏览器（说的就是你，Chrome和Safari）具有“有用”功能：地址栏有时可见，有时隐藏，从而改变了视口的可见大小。当视口高度变化时，这些浏览器没有将100vh的高度调整为屏幕的可见部分的高度，而是将100vh设置为隐藏了地址栏的浏览器的高度（其实就是100vh高度没变，但是地址栏那块把内容顶出去了一块）。结果导致：当地址栏可见时，屏幕的底部将被切断，从而破坏了开始时100vh的目的。
如下所示：
一个更好的解决方法：window.innerHeight
解决该问题的一种方法是依靠JavaScript而不是CSS。在页面加载时，将高度设置为window.innerHeight可以将高度正确设置为窗口的可见部分高度。 如果地址栏可见，则window.innerHeight将为全屏的高度。 如果地址栏处于隐藏状态，则window.innerHeight就是你期望的只是屏幕可见部分的高度。
在Wordsheet.io上学习时，你可以看到这一点。例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y。无论地址栏是否可见，屏幕都将是视口的高度。此外，在页面首次加载时将高度固定为适当的大小，可以防止在使用该网站的过程中地址栏隐藏，从而带来尴尬的屏幕调整大小体验。
遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。100vh是如此接近伟大（greatness），但考虑到它在移动设备上的局限性，最好避免使用它。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/133525.html原文链接：https://javaforall.net
