一般情况下，我们使用height:100vh进行全屏布局，这是一种方便的响应方式。.content{height:100vh;}但当在真实设备上测试我们的设计时，我们遇到了几个问题：大多数移动Chrome和Firefox浏览器在顶部都有一个UI（地址栏等）。在地址栏位于底部的Safari上，这变得更加棘手。不同的浏览器有不同大小的视口Mobile将浏览器视口计算为（顶部栏+文档+底部栏）=100vh整个文档用100vh填充页面问题谷歌：检测到滚动条问题。糟糕的用户滚动和难以导航的内容。注意：在Safari上测试了这个问题，结果更糟。解决方法是通过JS检测应用的高度constdocumentHeight=()=>{constdoc=document.documentElementdoc.style.setProperty('--doc-height',`${window.innerHeight}px`)}窗户。addEventListener('resize',documentHeight)documentHeight()使用css变量：:root{--doc-height:100%;}html,body{padding:0;保证金：0；高度：100vh；/*fallbackforJsload*/height:var(--doc-height);}最后的结果是现在没有额外的垂直滚动条了，Safari也没有问题，所以用户体验得到了很大的提升。
