[轉]CSS中設定div最小高度(支援IE6, IE7, IE8, FF等瀏覽器)
阿新 • • 發佈：2019-01-28
在CSS中設定div(及其他塊元素)的最小高度時，可以用min-height，但是此屬性並不支援IE6及IE6以下的IE版本，這裡有一個比較好的辦法來解決設定div最小高度時在各個瀏覽器之間的相容性問題，適用於IE5.5、IE6、IE7、IE8、IE9、Firefox、Google Chrome、Safari等所有瀏覽器。
假設你要設定的最小高度是100px，那麼程式碼如下：
1 |
div
{ |
2 |
height: auto!important; |
3 |
height: 100px; |
4 |
min-height: 100px; |
5 |
} |
用此方法設定div最小高度的原理：
IE5.5和IE6並不支援!important和min-height， 所以在IE5.5和IE6看來這個CSS是這樣的：
1 |
div
{ |
2 |
height: 100px; |
3 |
} |
而在IE5.5和IE6中，即使設定了height，也是可以自動延伸的，所以效果和在其他瀏覽器中設定min-height的效果是一樣的。
在其他瀏覽器（IE7、IE8、IE9、Firefox、Google Chrome、Safari）中，這幾種屬性及值都是支援的，並且!important優先權比較高，所以對於這些瀏覽器來說，有效的CSS是這樣的：
1 |
div
{ |
2 |
height: auto!important; |
3 |
min-height: 100px; |
4 |
} |
OK，這樣就解決了設定div最小高度時在各種瀏覽器之間不相容的問題了。