2009/03/16

區塊的高度與視窗相同

如何將區塊元素的高度設的與視窗一樣高?這種情形常常發生在 DIV + CSS 的佈局法:一個 DIV 區塊 的內容太少,不能填滿視窗,下半部空空的,顏色不搭,影響到整體的美感。可以在風格表作如下的設定:

<style type='text/css'>
* {height:100%}
DIV * {height:auto}
P   * {height:auto}
PRE * {height:auto}
BODY  {margin:0}
</style>

第一行 * {height:100%},會使所有區塊元素的高度都與視窗一樣高。包括 DIV , P , PRE, TABLE, FORM, OL, UL, DL , TEXTAREA, DIR, MENU;甚至包括 IMG,雖然 IMG 是文字行元素。第二行 DIV * {height:auto} 會將 DIV 區塊內的所有元素的高度都調回 auto。這兩行合起來,結果是最上層的 DIV 元素的高度與視窗相同。使用時要注意,P 元素區塊中不能放有區塊元素。最後一行 BODY {margin:0} 則可以適度調整最上層區塊的邊緣寬度。

實測時發現圖片的高度也可以用上面的方法設成與視窗一樣高,所以我又多作了個測試。調整圖片的高度與視窗相同。IE6, Firefox 失敗;Safari, Chrome 成功。