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，作動態變化。

張貼者： ant2legs 於 下午1:54