如何將區塊元素的高度設的與視窗一樣高?這種情形常常發生在 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 成功。