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;
}