2008/11/13

height, max-height, min-height

height | max-height | min-height

設定元素矩形格子的高。可以用 width 設定矩格的寬。

height

設定元素的高度,不可為負值。min-height, max-height 會改寫 height。可設為:

  1. 長度:用長度設定元素的高度。
  2. 百分比:相對於包納區塊(containing block)高度的百分比,也就是父元素的高度。如果包納區塊的高度沒有宣告,而是由內容決定其高度,則此參數與 auto 相同。
  3. auto:依據其它特徵決定高度,此為預設值。
  4. inherit:繼承父元素特徵。
max-height

設定元素的最大高度,不可為負值。max-height 與 height 的不同組合,會有不同的效果。

  1. height 大於 max-height 時,會展現 max-height 的高度。
  2. height:auto 時,會展現內容的高度,但是不會超過 max-height。
  3. height 小於 max-height 時,會展現 height 的高度,並且高度固定。

此特徵的值可設為:

  1. 長度:用長度設定元素的高度。
  2. 百分比:相對於包納區塊高度的百分比。如果包納區塊的高度沒有宣告,而是由內容決定其高度,則此參數與 auto 相同。
  3. inherit:繼承父元素特徵。


  • IE6 無此項;Firefox, Safari, Chrome 有支援。

CSS hack max-height。IE6 沒有 max-height,可以利用 expression() 與 clientHeight 達成 max-height 的功能。expression() 限用於 IE6, IE7。下例中

  1. IE6 不認得 max-height:該行會被 IE6 忽略;IE7, IE8, Firefox, Safari, Chrome 可正確解讀。
  2. IE8, Firefox, Safari, Chrome 不認得 expression(),該行會被忽略。
  • 上例中,必須加上 overflow:auto,否則 IE6 會擴張高度。這與真正的 max-height 有差異
min-height

設定元素的最小高度,不可為負值。min-height 與 height 的不同組合,會有不同的效果。

  1. 元素矩格先以 min-height 展現其高度。
  2. 如果 height 的值大於 min-height,則展現 height 的高度,且高度固定。
  3. 如果內容超過 min-height,且 height:auto,則會擴展高度。
  4. 如果內容超過 min-height,且 height 不是設設為 auto,則高度固定。
此特徵的值可設為:
  1. 長度:用長度設定元素的高度。
  2. 百分比:相對於包納區塊高度的百分比。如果包納區塊的高度沒有宣告,而是由內容決定其高度,則此參數與 auto 相同。
  3. inherit:繼承父元素特徵。

  • IE6 無此項;Firefox, Safari, Chrome 有支援。

CSS hack min-height。IE6 沒有 min-height,但是 IE6 的 height 運作方式類似 min-height;當內容超過高度時,會擴張高度。CSS hacks 利用下面的幾個條件,達成跨瀏覽器的統一性:

  1. IE6 不認得 min-height:該行會被 IE6 忽略;IE7, IE8, Firefox, Safari, Chrome 可正確解讀。
  2. IE6 不認得 !important:該行會被 IE6 忽略,最後 IE6 解讀 height:100px。IE7, IE8, Firefox, Safari, Chrome 可正確解讀 !important,因此該行優先權高於 height:100px。

:HOVER, :ACTIVE 的應用。使用時要注意,在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。

javascript 應用。可以用 style 物件 的特徵 height,作動態變化。