DIV+CSS最小高度（相容IE6\IE7\FF）

折騰了一上午，就是搞不定這個最小高度 min-height:的問題，因為min-height:只在IE7\FF中起作用。至於這個IE6死活就是不認。而我這個頁面又必需得用這個最小高度來定。

頁面是二欄的左右分，左欄算是導覽功能表固定不變，長約1160PX，右邊是產品的詳細資料且是動態，可長可短。

左右欄中間是一條1PX灰色的分隔線，就是這根分隔線倒底是定在左欄的右邊框上，還是定在右欄的左邊框上，問題有點頭痛。因為左邊定死1160PX，右邊是自由伸展。如果定在左欄上，右欄動態內容長度大於1160時這根線是不會跟著做延伸的。那好，那就定在右欄上，但如果右欄的動態內容小於左欄1160時，這根線也是不會自動伸止1160處。麻煩了，真是左右為難。

現在只有最小高度可以解決這個問題了，把右欄定一個最小高度min-height:1160px;這樣左右就一樣了。即使右欄動態內容不能達到1160的長度，有了這個最小高度，右欄將始終都是以1160這個最小高度來顯示，至於動態內容大於1160時，也是可以做自動延伸的。問題到了這一步，也能用這方法解決了。

 

但頭痛的是IE6就是不認min-height:，這樣定好後在IE7\FF裡測試是沒有任何問題的。但我們現在要解決IE6的。好在IE6與IE7不同，它可以將一個模組定死高度，當模板裡內容大於這個高度時，是會自動撐開這個模組，IE7如果定死高度，內容大於高度時是會被遮住，就是不顯示。

利用這一點。我們就可以在代碼裡設定了，具體如下：

.left{float:left;width:200px;}

 

.right{

float:right;

width:600px;

border-left:1px solid #ccc;

min-height:1116px;//IE7\FF

height:100%;//IE6\IE7\FF 這個很重要，IE6定死高度後，需要再加上這條，才能自動延伸。

_height:1116px;//IE6

}

 

就這樣，問題都解決了。