为什么80%的码农都做不了架构师?>>>
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;
}