vh单位vh是CSS3中的一个长度单位，其值为：100vh == 视窗高度。即如果窗口高度为500px，那么 1vh == 5px。具体的值会随着浏览器视窗高度的改变而实时改变，因此可以利用这个单位来
vh单位
vh是CSS3中的一个长度单位，其值为：100vh == 视窗高度。即如果窗口高度为500px，那么 1vh == 5px。具体的值会随着浏览器视窗高度的改变而实时改变，因此可以利用这个单位来制作高度自适应的页面。
兼容旧的浏览器
IE9+的浏览器支持vh单位，其他的浏览器支持程度可以参考caniuse vh?,对于IE8等浏览器可以尝试定义：
html,body{ height:100%;}再在需要自使用高度的元素上使用百分比来代替vh以达到类似的效果。如：
#div1{ height:50%;//代替height:50vh;#div1为body的子节点}最小高度限制
在实际的应用中，我们往往不想让一个页面元素的高度过小，以免其无法容纳某些关键元素，此时我们需要对这个元素加一个最小高度限制。如：
#div1{ height:50vh; min-height:100px;}以上代码中，#div1元素的高度为50vh，即视窗高度的50%，但其最小高度为100px。即使实际的视窗高度小于200px，这个元素的高度也不会小于100px。
仅仅设置一个最小高度往往是不够的，有时候需要利用line-height==height来实现元素的垂直居中，或者使用border来画一个与父节点齐高的三角形的时候就会出现问题，因为line-height和border-width均不支持设定最小值的限制。
此时，可以在视窗高度小于某个值时，向body元素添加一个类，如：fixVH，然后根据这个类设置一个固定的line-height或border-width。如：
.fixVH #div1{ line-height:300px;}.fixVH #div1:before{ border-width:150px;}可以查看一个具体的例子。
元素的垂直居中
上文提到使用line-height==height来垂直居中元素，另外还可以使用display:table-cell来垂直居中元素，这个方式不需要指定父元素line-height。
指定父元素display:table;子元素：display:table-cell;vertical-align:middle;如：
#div2{ width:100%; height:20vh; min-height:100px; display:table; background-color:#cecece;}#div2>div{ display:table-cell; vertical-align:middle;}