CSS3 的宽高设置 vh和vw

CSS3 的宽高设置 vh和vw

昨天晚上写样式，需要用到屏幕的宽高，原本还在用js的写法：
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
结果搜索的时候发现了CSS3的 vh和vw

vh和vw

vh: 表示可见区域高度, 假如浏览器可见区域高度为100px，1vh 就表示1px; 即可见被均分为100单位的vh：
vw: 表示可见区域宽度, 假如浏览器可见区域宽度为100px，1vw 就表示1px; 即可见被均分为100单位的vw：

用法

#the_left{
		height: 100vh;/* 表示内容区域的高度*/
		width: 20vw;/* 表示内容区域的宽度的20% */
	}
#the_right{
		height: calc(100vh - 10px);/* 表示内容区域的高度 减去 10px*/
		width:  calc(80vw - 10px);/* 表示内容区域80%的宽度 减去 10px*/
	}

拓展

vmax: 表示视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;
vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;
视区所指为浏览器内部的可视区域大小，
即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
参考文章：css3新发现