width:100vh与min-height:calc(100vh + 51px)

最新推荐文章于 2024-11-23 20:31:08 发布

转载最新推荐文章于 2024-11-23 20:31:08 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ysx215/p/7002989.html

文章标签：

#php

本文介绍了视窗单位vh和vw的概念及其在网页布局中的应用，并详细解析了CSS3中新增的calc功能，展示了如何通过表达式动态计算元素尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vh:相对于视窗的高度，那么vw:则是相对于视窗的高度。

“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

详细vh的用法，大家可以参考http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

calc是英文单词calculate(计算)的缩写，是CSS3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

转载于:https://www.cnblogs.com/ysx215/p/7002989.html