關於div寬度和高度的100%設定

標籤：style   blog   http   strong   ar   問題   div   html   

設定DIV大小的有兩個屬性width和height，以前在學習DIV每次給DIV設定100%寬度或高度時都很迷惑，不明白這個100%的寬度（高度）到底有多寬有多高？這個100%是從哪裡得到的從哪裡繼承的？今天我們的話題就是有關div高度100%的問題！

其實，要弄懂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%?

前面總得有個容器說明他的高度是多少。這樣的話div才能按比例100%繼承上一級的高度。可惜的是瀏覽器一般預設解釋為內容的高度，而不是 100%。但是只要為html和body設定高度為100%就可以了：html,body{height:100%;}，這樣之後div會按比例來繼承上 一級的高度了，僅僅設定的DIV元素的height屬性貌似沒有什麼效果。

同時，讓人高興的是，這樣設定的css樣式不存在瀏覽器安全色問題，在IE5.5、IE6、IE7、IE8還有Firefox均可正常顯示。

那麼，如下的樣式可以設定Div撐滿整個頁面：

<style type="text/css">
        html
        {
         height:100%;
         margin:0;
        }
        body
        {
            height:100%;
            margin:0; 
        }
    </style>

<div style="width:100%; height:100%; z-index:1">
</div>

有一點需要注意的是，Html級元素預設寬度是100%，即整行；但是高度並不是100%，而僅僅是一行而已。

所以要想實現撐滿整個頁面，必須顯式地設定高度為100%！

http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html