DIV+CSS最小高度（兼容IE6\IE7\FF）發(fā)布者：本站     時(shí)間：2020-05-16 09:05:01

折騰了一上午，就是搞不定這個(gè)最小高度 min-height:的問(wèn)題，因?yàn)閙in-height:只在IE7FF中起作用。至于這個(gè)IE6死活就是不認(rèn)。而我這個(gè)頁(yè)面又必需得用這個(gè)最小高度來(lái)定。

頁(yè)面是二欄的左右分，左欄算是導(dǎo)航菜單固定不變，長(zhǎng)約1160PX，右邊是產(chǎn)品的詳細(xì)信息且是動(dòng)態(tài)的，可長(zhǎng)可短。

左右欄中間是一條1PX灰色的分隔線，就是這根分隔線倒底是定在左欄的右邊框上，還是定在右欄的左邊框上，問(wèn)題有點(diǎn)頭痛。因?yàn)樽筮叾ㄋ?1160PX，右邊是自由伸展。如果定在左欄上，右欄動(dòng)態(tài)內(nèi)容長(zhǎng)度大于1160時(shí)這根線是不會(huì)跟著做延伸的。那好，那就定在右欄上，但如果右欄的動(dòng)態(tài)內(nèi)容 小于左欄1160時(shí)，這根線也是不會(huì)自動(dòng)伸止1160處。麻煩了，真是左右為難。

現(xiàn)在只有最小高度可以解決這個(gè)問(wèn)題了，把右欄定一個(gè)最小高度min-height:1160px;這樣左右就一樣了。即使右欄動(dòng)態(tài)內(nèi)容不能達(dá)到 1160的長(zhǎng)度，有了這個(gè)最小高度，右欄將始終都是以1160這個(gè)最小高度來(lái)顯示，至于動(dòng)態(tài)內(nèi)容大于1160時(shí)，也是可以做自動(dòng)延伸的。問(wèn)題到了這一步， 也能用這方法解決了。

但頭痛的是IE6就是不認(rèn)min-height:，這樣定好后在IE7FF里測(cè)試是沒(méi)有任何問(wèn)題的。但我們現(xiàn)在要解決IE6的。好在IE6與 IE7不同，它可以將一個(gè)模塊定死高度，當(dāng)模板里內(nèi)容大于這個(gè)高度時(shí)，是會(huì)自動(dòng)撐開(kāi)這個(gè)模塊，IE7如果定死高度，內(nèi)容大于高度時(shí)是會(huì)被遮住，就是不顯 示。

利用這一點(diǎn)。我們就可以在代碼里設(shè)置了，具體如下：

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

.right{

float:right;

width:600px;

border-left:1px solid #ccc;

min-height:1116px; // IE7FF

height:100%; // IE6IE7FF 這個(gè)很重要，IE6定死高度后，需要再加上這條，才能自動(dòng)延伸。

_height:1116px; //IE6

}