1.height的百分比
當我們給塊元素設置百分比高度時,往往沒能看到效果.因為百分比的大小是相對其最近的父級元素的高的大小,也就是說,其最近的父級元素應該有一個明確的高度值才能使其百分比高度生效.
<div id="container1"> <div id="wrap"> wrap's height work </div> </div> <br> <div id="container2"> <div id="wrap2"> wrap2's height doesn't work </div> </div>
#container1 { height: 100px; background-color: red; } #wrap { height: 50%; background-color: green; } #container2 { } #wrap2 {
/*該height屬性無效,因為其父元素沒有一個明確的高度*/ height: 50%; background-color: green; }
子元素的百分比高度也可以基於父元素的百分比高度,前提是父元素的父元素必須有一個明確的高度:
<div id="#container"> <div id="wrap"> <div id="content"> content's percent height work only when does the wrap'height work </div> </div> </div>
#container { height: 500px; } #wrap { height: 100%; } #content { height: 50%; }
但是,我們應該盡量避免這種多層百分比高度嵌套的風格.
2.min-height的百分比
再說說min-height吧.設置min-height的元素即使內容的高度很少時也能撐開到min-height設置的高度;當內容的高度大於min-height時就設置為內容的高度.
要使min-height的百分比值生效,其父元素的height值必須為一個固定的高度或者是一個有效的百分比高度.
值得注意的是,父元素設置了有效的min-height但沒有設置height屬性時,子元素的height和min-height的百分比不會生效.因為設置height和min-height必須基於一個設置了固定高度或者是一個有效百分比高度的父元素.
<div id="container1"> <div id="wrap"> wrap's min-height work </div> </div> <br> <div id="container2"> <div id="wrap2"> wrap2's min-height doesn't work </div> </div>
#container1 { height: 100px; background-color: red; } #wrap { /*該min-height生效,因為其父元素設置了有效height屬性*/ min-height: 50%; background-color: green; } #container2 { min-height: 100px; } #wrap2 { /*該min-height無效,因為其父元素沒有設置有效的height屬性(即使設置了min-height屬性)*/ min-height: 50%; }
3.鋪滿屏幕的布局方法
我們可以通過設置html和body的高度來填滿整個瀏覽器屏幕的高度:
html {
height: 100%;
}
body {
min-height: 100%;
}
如果我們將html和body都設置為height: 100%時,body的高度僅會被設置為瀏覽器屏幕的高度.當body里的內容高度大於瀏覽器屏幕高度時,會因為默認的設置overflow:visible使得高出的部分被隱藏起來.
如果我們將html和body都設置為min-height: 100%時,body元素不會擴展到瀏覽器屏幕的高度,因為html設置為百分比值的height不會生效(因為html沒有父元素了,也就不會符合父元素有明確的高度值的條件),body元素也就因為html沒有一個明確的高度使得min-height不會生效.
4.布滿屏幕的凝膠狀布局
如果你想實現一種鋪滿屏幕,兩邊留空的凝膠狀布局的話,可以使用如下方式
<html> <body> <div id="container"> </div> </body> </html>
html,body{ /*將height設置為100%,使得內容鋪滿屏幕*/ /*且#container有高度基於的父元素*/ height: 100%; background-color: #dddddd; } #container { /*即使內容很少,也能鋪滿整個屏幕*/ /*當內容高度大於屏幕高度時,內容會延伸*/ min-height: 100%; background-color: #ffffff; width: 500px; margin-left: auto; margin-right: auto; }
效果:
