關於Div的寬度與高度的100 設定

2021-09-08 00:09:25 字數 938 閱讀 9906

正像你所知道的那樣,設定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,這樣之後div會按比例來繼承上一級的高度了,僅僅設定的div元素的height屬性貌似沒有什麼效果。

同時,讓人高興的是,這樣設定的css樣式不存在瀏覽器相容問題,在ie5.5、ie6、ie7、ie8還有火狐均可正常顯示。

那麼,如下的樣式可以設定div撐滿整個頁面:

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

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

部分解釋來自於:

,感謝合肥seo!

關於div高度 寬度 100

正像你所知道的那樣,設定div大小的有兩個屬性width和height,以前在學習div每次給div設定100 寬度或高度時都很迷惑,不明確這個100 的寬度 高度 到底有多寬有多高?這個100 是從 得到的從 繼承的?今天我們的話題就是有關div高度100 的問題!其實,要弄懂div寬度 widt...

關於Div的寬度與高度的100 設定

正像你所知道的那樣,設定div大小的有兩個屬性width和height,以前在學習div每次給div設定100 寬度或高度時都很迷惑,不明確這個100 的寬度 高度 到底有多寬有多高?這個100 是從 得到的從 繼承的?今天我們的話題就是有關div高度100 的問題!其實,要弄懂div寬度 widt...

關於Div的寬度與高度的100 設定

正像你所知道的那樣,設定div大小的有兩個屬性width和height,以前在學習div每次給div設定100 寬度或高度時都很迷惑,不明確這個100 的寬度 高度 到底有多寬有多高?這個100 是從 得到的從 繼承的?今天我們的話題就是有關div高度100 的問題!其實,要弄懂div寬度 widt...