前言
今天写项目时出现高度设置百分百却不占满屏幕，第一反应看自己设置的是块级元素还是行级元素。看了几篇博客，发现并不能解决问题。脱离文档流的做法都没考虑，前期模板搭建脱离文档流，后面开发会出现很多问题。
以上图片是我要解决的问题
正文
目前使用的是vue3+setup语法糖
解决方案一：用窗口高度动态计算高度
在html里动态绑定高度样式
- window.innerHeight获取窗口高度
注意
使用了几种高度，如screen.height,body.offsetheight等但都有一些问题。 - document.body.clientHeight：网页可见区域高
- document.body.offsetHeight：网页可见区域宽(body)，包括border、margin等
- document.body.scrollHeight ： 网页正文全文高
- window.screen.height ： 屏幕分辨率的高
以上body.xx都会出现高度为0的情况，在主页body高度设置百分百无效，需要给body设置具体高度。
window.screen.height 会出现滚动条情况。文章来源：https://www.toymoban.com/news/detail-813126.html
解决方案二：calc()函数
height：calc(100vh),100vh = 视窗高度的100%，可使得div的高度自动撑开到屏幕高度。
文章来源地址https://www.toymoban.com/news/detail-813126.html
到了这里，关于使用CSS计算高度铺满屏幕的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
