設置DIV大小的有兩個屬性width和height,之前在學習DIV每次給DIV設置100%寬度或高度時都很迷惑,不明確這個100%的寬度(高度)到底有多寬有多高?這個100%是從哪裏獲得的從哪裏繼承的?今天咱們的話題就是有關div高度100%的問題!css
正像你所知道的那樣,設置DIV大小的有兩個屬性width和height,之前在學習DIV每次給DIV設置100%寬度或高度時都很迷惑,不明確這個100%的寬度(高度)到底有多寬有多高?這個100%是從哪裏獲得的從哪裏繼承的?今天咱們的話題就是有關div高度100%的問題!html
其實,要弄懂div寬度|width100%、div高度|height100%究竟是怎麼實現的,只需弄懂一個簡單的問題就能夠了,即100%的基數是誰,就是這個100%是相對於誰的width、height來講是100%?瀏覽器
div的100%是從其上一級div的寬高繼承來的,有一點很關鍵,就是要設置div100%顯示,必須設置其上一級div的寬度或高度,不然無效。舉例說明:父div(deman)寬300高200,子div(cc)若是在這個條件下設置divcc的寬高都爲100%的話,那cc的確切大小就是父div的大小(寬300高200),在嘗試中你會發現,div顯示會受自身和其上一級div的padding和margin影響,而其實際寬高不受影響。值得玩味噢!學習
你設div的高度爲100%,那麼它是和什麼地方相對爲100%?htm
前面總得有個容器說明他的高度是多少。這樣的話div才能按比例100%繼承上一級的高度。惋惜的是瀏覽器通常默認解釋爲內容的高度,而不是100%。可是隻要爲html和body設置高度爲100%就能夠了:html,body{height:100%;},這樣以後div會按比例來繼承上一級的高度了,僅僅設置的DIV元素的height屬性貌似沒有什麼效果。繼承
同時,讓人高興的是,這樣設置的css樣式不存在瀏覽器兼容問題,在IE5.五、IE六、IE七、IE8還有火狐都可正常顯示。容器
那麼,以下的樣式能夠設置Div撐滿整個頁面:樣式
<style type="text/css">
html
{
height:100%;
margin:0;
}
body
{
height:100%;
margin:0;
}
</style>margin
<div style="width:100%; height:100%; background-color:#666; z-index:1">
</div>兼容
有一點須要注意的是,Html級元素默認寬度是100%,即整行;可是高度並非100%,而僅僅是一行而已。
因此要想實現撐滿整個頁面,必須顯式地設置高度爲100%!