為什么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; }

轉載于:https://my.oschina.net/hwxn/blog/679389

總結

以上是生活随笔為你收集整理的使用vh来制作高度自适应页面和元素垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。