CSS使用calc()获取当前可视屏幕高度的实现

先 了解 一下CSS3的相对长度单位(参考 详细教程 ) ：

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

em	它是描述相对于应用在当前元素的字体 尺寸 ，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
ex	依赖于英文字母小 x 的高度
ch	数字 0 的 宽 度
rem	根元素（ht ML ）的 font -s ize
vw	viewpoint width，视窗宽度，1vw=视窗宽度的1%
vh	viewpoint h ei ght，视窗高度，1vh=视窗高度的1%
vmin	vw和vh中较小的那个。
vmax	vw和vh中 较大 的那个。

由此可见，通过 vh / vw 我们可以获得当前屏幕的视窗宽度，所以在css中，通过计算这个高度即可使得div的高度自动撑开到屏幕高度。而计算这个高度可以使用css3的 calc() 函数(参考 详细教程 )：

calc() 函数用于动态计算长度值。

需要注意的是， 运算 符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则；

所以，只需设置 div 的高度 height 为 calc(100vh) 即可, 100vh = 视窗高度的100%，例子：

div {
  width: 100%;
  height: calc(100vh);
}

需要注意的是，该方法适合于网页高度等于当前屏幕视窗高度，按实际需求可能还是需要JS的。

到此这篇关于CSS使用calc()获取当前可视屏幕高度的实现的 文章 就介绍到这了,更多相关CSS使用calc()获取当前屏幕高度内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 CSS使用calc()获取当前可视屏幕高度的实现 全部内容，希望文章能够帮你解决 CSS使用calc()获取当前可视屏幕高度的实现 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS使用calc()获取当前可视屏幕高度的实现的详细内容...