CSS百分比定義高度的冷知識

當我們給塊級元素設置響應式高度的時候，例如給div設置height=50%，往往沒能看到效果。

原因是百分比的大小是相對其父級元素寬高的大小，如最外層元素設置的百分比是對應屏幕而言的。

需要了解的是對於寬度來說，其父級元素無須確定寬度就能設置百分比，例如我們可以利用這個特性給未知寬度的塊級元素設置水平居中效果：

父元素css：             position: relative/absolute;    left: 50%;

子元素css：             position: relative;    left: -50%;

 

但高度則不同，若某元素的父元素沒有確定高度，則無法有效使用height=XX%的樣式，我們可以這樣解決（假設最外層的div需要設置百分比高度樣式）：

html, body { 
    height: 100%; 
} 

.outDiv {
    height: 50%; 
}

 

不過這里有個需要注意的，若div里的內容超出了div的高度，在IE7+的瀏覽器是無法將div撐起來的（IE6則可以），如果要顧及這一點，可以使用min-height解決（當然也要考慮IE6不支持min-height的問題）：

html, body { 
    height: 100%; 
} 

.outDiv {
    min-height: 50%;
}
* html .outDiv {
    height: 50%; 
}

有些時候，如果僅僅設置 html,body{height:100%;} 可能會導致html或者body的高度僅僅為瀏覽器可視區域高度，而非頁面可視區域高度。如果你寫模態窗口特效遇到這種問題肯定是很煩人（比如添加遮住一切的黑色半透明div，其高度沒法設為頁面可視區域高度），解決方法依舊是使用min-height來替代（當然如果你沒有遇到bug，可以忽視這一段）：

html,body{min-height:100%;_height:100%;}

但是這樣僅僅能確保html或者body中至少有一個的高度是頁面可視區域高度，Chrome和IE是反過來的，前者通過html可以獲取我們想要的高度，后者得通過body來獲取，解決方法如下

//獲取頁面可視區域高度復用
$.VJ_getBH = function(){
   var body_h = $("body").height();
   var html_h = $("html").height();
   var h = body_h>html_h?body_h:html_h;
   return h
}

共勉~