你對(duì)DIV CSS網(wǎng)頁(yè)布局中最小高度（min-height）的使用是否了解，這里和大家分享一下，最小高度可以設(shè)定一個(gè)BOX的最小高度，但到目前為止，只有Opera和Mozilla支持，IE7開(kāi)始也支持了，但I(xiàn)E7處于測(cè)試階段。

DIV CSS網(wǎng)頁(yè)布局中最小高度（min-height）的妙用

最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定，超出就自動(dòng)向下延伸，但到目前為止，只有Opera和Mozilla支持，IE7開(kāi)始也支持了，但I(xiàn)E7處于測(cè)試階段，等正式版發(fā)布到普及需一段也許比較長(zhǎng)的時(shí)間，除非MS把它捆綁在某個(gè)操作系統(tǒng)上，如何在現(xiàn)有基礎(chǔ)上（IE680-90%），合理、妙用最小高度了？

◆假定有二個(gè)BOX，我們需要它的最小高度為150PX。

CSS

div.box1,div.box2{  
width:300px;  
min-height:150px;  
background:#EEE;  
float:left;  
margin-right:20px;  
}  
 

 xhtml

<div>IE中沒(méi)保持最小高度為150px</div> 
<div>最小高度可以設(shè)定一個(gè)BOX的最小高度，  
當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定</div> 
 
 

 現(xiàn)在的效果，IE中沒(méi)保持最小高度為150px。

解決的方法

◆為IE設(shè)定一個(gè)高度

ExampleSourceCode

*htmldiv.box1,*htmldiv.box2{height:150px;}  
 

◆另外一種解決方法是采用CSS的屬性選擇符（AttributeSelectors）

ExampleSourceCode 

div.box1,div.box2{......height:150px;}  
/*IE靠這保持最小高度，超出就自動(dòng)向下延伸*/  
div[class].box1,div[class].box2{height:auto;}  
/*具有類選擇符(class)屬性的DIV對(duì)象*/  
 

 IE自然又是不支持的啦，Opera和Mozilla支持，讀取這個(gè)高度。可應(yīng)用場(chǎng)合：搜索、文章等頁(yè)面（沒(méi)采用100%高度，當(dāng)搜到的內(nèi)容較少時(shí)，不至于頁(yè)面太短。

【編輯推薦】

1. 輕松實(shí)現(xiàn)CSS樣式實(shí)時(shí)切換技巧
2. 八個(gè)困擾新手的DIV CSS網(wǎng)頁(yè)布局問(wèn)題
3. CSS2.0中最常用的十八般兵器
4. 技術(shù)分享 DIV CSS網(wǎng)站布局八大竅門
5. 解讀CSS中position屬性四大可選值用法