现在我不再需要考虑 html 或 body 高度。 它看起来不错，让我微笑。
JS动态获取方法
一切皆有可能，也能解决这个问题
<script type="text/javascript">
let screenH=document &&document.documentElement &&document.documentElement.clientHeight || window.innerHeight;
document.querySelector('body').style.height=screenHeight+"px";
</script>
100%全屏方式
我发现很多前端朋友在使用这种方法的时候经常会出现这样的情况。
body{
height:100%;
}
结果还是0，然后我就陷入了无尽的疑问……
因为 CSS 中的某些属性是从父级继承的，所以这就是其中之一。 当前html标签是0，所以%自然也是0。
html,body{
height:100%;
}
因此，在设置时不要忘记带上“我”。 说到继承 CSS 属性，这里有一个扩展评论：
填充法
html,body{
height:-webkit-fill-available;
height:fill-available;
}
看到这里，有的同学可能会好奇fill-和**100%**设置有什么区别？
这是一个演示：
html,body{
height:100%,
padding:20px;
}
body{
height:-webkit-fill-available;
height:fill-available;
padding:20px;
}
设置 100% 也会破坏外部容器，而 fill- 不会破坏外部容器并保持我们预期的高度。
fill-是剩余可用空间的智能计算。 如果没有其他属性的干扰，相当于100%。 但如果有属性干扰，则会智能计算。宽度和宽度均适用
说了这么多，我们来扩展一个问题
vh定义方法
vh：css3新单位，view的缩写，指可视窗口的高度，1vh = 视图窗口高度的1%；
现在我们已经讨论了 CSS 单位，我想请您再思考一下这个问题：
vh 单位定义为窗口高度的百分比。 这不是很容易吗？
body{
height:100vh;
}
完成了，你完成了！
下面是对vh在移动设备上的一些“功能”的扩展理解。
当我们仍然将body设置为100vh时，分别打开微信内置浏览器、浏览器、浏览器。
从效果图中不难看出，100vh在浏览器和浏览器中的解决方案并不完美。 滚动条出现在两个浏览器中，并且无法达到我们预期的视觉区域的全屏高度。
作为简历达人，借助搜索引擎，我们了解到100vh中包含了网址栏和工具栏。 它是第一批更新其实现的移动浏览器之一，它选择根据屏幕的最大高度定义 vh 的固定值。 ，然后浏览器也会效仿。 这就产生了我们此时看到的效果图。
为什么会这样呢？ 一位苹果官方开发人员回应说：“这不是一个错误，而是一个。”
事实证明，这是一件独一无二的艺术品。 滚动时可见区域会动态变化，如果我们相应地更新CSS视口高度，则需要在滚动时更新布局。 为了获得更好的用户体验，使用更大的视图尺寸是最好的折衷方案。
通过 CSS 变量设置
它是通用的，我们可以通过JS获取CSS变量中存储的处理并应用。
body{
height:100vh;
height:calc(var(--vh,1vh)*100);
}
提供备份属性，这样就OK了，接下来我们设置自定义变量
//获取视口高度 *0.01获取vh单位值
let vh=(document &&document.documentElement &&document.documentElement.clientHeight) || window.innerHeight)*0.01;
//document中设置自定义CSS属性变量
document.documentElement.style.setProperty('--vh', `${vh}px`);
这样，在:root中就成功创建了--vh的css变量。
为了防止使用旋转屏幕功能，我们需要监听窗口调整大小事件来更新我们创建的--vh值
window.addEventListener("resize",()=>{
let vh=(document &&document.documentElement &&document.documentElement.clientHeight) || window.innerHeight)*0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
})
显然，这个成本还是有点高。 一旦更新了--vh的值，我们的界面就会重新绘制辐射4设置全屏模式，体验非常不好。 我们应该尽量避免这样麻烦的操作。
参考：
