DIV CSS網(wǎng)頁布局 最小高度（min-height）的妙用
更新時(shí)間：2008年11月13日 10:15:00 作者：
最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定，超出就自動向下延伸，但到目前為止，只有Opera 和 Mozilla 支持，IE7開始也支持了，但I(xiàn)E7處于測試階段，等正式版發(fā)布到普及需一段也許比較長的時(shí)間，除非MS把它捆綁在某個(gè)操作系統(tǒng)上，如何在現(xiàn)有基礎(chǔ)上（IE6 80-90%），合理、妙用最小高度了？
假定有二個(gè)BOX，我們需要它的最小高度為150PX。
CSS
div.box1,div.box2{
width: 300px;
min-height: 150px;
background: #EEE;
float: left;
margin-right: 20px;
}
xhtml
<div>IE中沒保持最小高度為150px</div>
<div>最小高度可以設(shè)定一個(gè)BOX的最小高度， 當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定</div>
現(xiàn)在的效果，IE中沒保持最小高度為150px。
解決的方法
為IE設(shè)定一個(gè)高度
* html div.box1,* html div.box2{height: 150px;}
wellstyled.com 的解決方法是采用 CSS 的屬性選擇符（Attribute Selectors）
div.box1,div.box2{ ......height: 150px;}
/* IE靠這保持最小高度，超出就自動向下延伸 */
div[class].box1,div[class].box2{height: auto;}
/* 具有類選擇符(class)屬性的DIV對象 */
IE自然又是不支持的啦，Opera 和 Mozilla 支持，讀取這個(gè)高度?？蓱?yīng)用場合：搜索、文章等頁面（沒采用100%高度，當(dāng)搜到的內(nèi)容較少時(shí)，不至于頁面太短。
CSS
div.box1,div.box2{
width: 300px;
min-height: 150px;
background: #EEE;
float: left;
margin-right: 20px;
}
xhtml
<div>IE中沒保持最小高度為150px</div>
<div>最小高度可以設(shè)定一個(gè)BOX的最小高度， 當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定</div>
現(xiàn)在的效果，IE中沒保持最小高度為150px。
解決的方法
為IE設(shè)定一個(gè)高度
* html div.box1,* html div.box2{height: 150px;}
wellstyled.com 的解決方法是采用 CSS 的屬性選擇符（Attribute Selectors）
div.box1,div.box2{ ......height: 150px;}
/* IE靠這保持最小高度，超出就自動向下延伸 */
div[class].box1,div[class].box2{height: auto;}
/* 具有類選擇符(class)屬性的DIV對象 */
IE自然又是不支持的啦，Opera 和 Mozilla 支持，讀取這個(gè)高度?？蓱?yīng)用場合：搜索、文章等頁面（沒采用100%高度，當(dāng)搜到的內(nèi)容較少時(shí)，不至于頁面太短。
相關(guān)文章
input下的value值無法修改的解決方法2008-07-07
用CSS floats創(chuàng)建三欄頁布局...2007-02-02
2008-01-01
CSS實(shí)現(xiàn)每行新聞數(shù)量不等效果代碼
像大型網(wǎng)站中間那部分的效果：由于文章的標(biāo)題的長度不一樣，會自動實(shí)現(xiàn)行滿后下一個(gè)標(biāo)題自動換行，不滿，則在后面繼續(xù)添加。2008-10-10
首先是在www.126.com上發(fā)現(xiàn)的,感覺很好用很奧妙,值得收藏和分享 通過css來讀取圖片坐標(biāo)系實(shí)現(xiàn)局部背景圖2008-05-05
div+CSS網(wǎng)頁布局的意義與副作用原因小結(jié)
隨著WEB2.0標(biāo)準(zhǔn)化設(shè)計(jì)理念的普及，國內(nèi)很多大型門戶網(wǎng)站已經(jīng)紛紛采用DIV+CSS制作方法，從實(shí)際應(yīng)用情況來看，此種方法絕對好于表格制作頁面的方法。2008-09-09
XHTML標(biāo)簽的自關(guān)閉寫法的壞處分析
我們都知道XHTML里面的img標(biāo)記應(yīng)該這樣寫：<img alt="" src="" />，這種寫法也就是所謂的自關(guān)閉，在XML中是完全合法的寫法。2008-09-09
用css實(shí)現(xiàn)的訪問過的連接下面都有一個(gè)下劃線方便需要這種效果的朋友特整理如下2008-06-06
淘寶段正淳的css筆記大全...2007-10-10
用CSS解決中英文混合字符串的截取省略問題的解決辦法...2007-02-02