Div+Css教程模板無(wú)憂>建站教程>Div+Css教程>Div+CSS教程>

DIVCSS網(wǎng)頁(yè)布局：最小高度(min-height)的妙用_Div+CSS教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

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

CSS

示例代碼 [m.dounai2.com]

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

xhtml

示例代碼 [m.dounai2.com]

<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è)高度

示例代碼 [m.dounai2.com]

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

wellstyled.com 的解決方法是采用 CSS 的屬性選擇符（Attribute Selectors）

示例代碼 [m.dounai2.com]

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è)面太短。