您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > CSS布局中最小高度的妙用

CSS布局中最小高度的妙用

文章來源：365jz.com 點(diǎn)擊數(shù)：184 更新時(shí)間：2008-04-25 11:56 參與評(píng)論

最小高度可以設(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

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

xhtml

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

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

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="最小高度,min-height,CSS hack" /> <meta http-equiv="Description" content="最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi) 容較少時(shí)時(shí)，也能保持BOX的高度為一定ext)" /> <meta http-equiv="pragma" content="no-cache" /> <meta name="author" content="forestgan" /> <meta name="copyright" content="http://www.forest53.com" /> <title>CSS布局中最小高度（min-height）的妙用</title> <style type="text/css"> #wrap{width: 620px; margin: 2em auto;font-size: 75%;} div.box10,div.box20{ width: 300px; min-height: 150px; background: #EEE; margin-right: 20px; float: left; text-align:left; } p{padding: 1em; margin: 0;} </style> </head> <body> <div id="wrap"> <div class="box10"> <p>IE中沒保持最小高度為150px</p> </div> <div class="box20" style="margin-right: 0;"> <p>最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定</p> </div> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

解決的方法

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

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

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

（Attribute Selectors）

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è)面（沒采用100%高度，當(dāng)搜到的內(nèi)容較少時(shí)，不至于頁(yè)面太短.....

最終效果

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="最小高度,min-height,CSS hack" /> <meta http-equiv="Description" content="最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi) 容較少時(shí)時(shí)，也能保持BOX的高度為一定" /> <meta name="author" content="forestgan" /> <meta name="copyright" content="http://www.forest53.com" /> <title>CSS布局中最小高度（min-height）的妙用</title> <style type="text/css"> #wrap{width: 620px; margin: 2em auto;font-size: 75%;} p{padding: 1em; margin: 0;} div.box1,div.box2{ width: 300px; min-height: 150px; background: #EEE; margin-right: 20px; height: 150px; float: left; text-align:left; } div[class].box1,div[class].box2{height: auto;} </style> </head> <body> <div id="wrap"> <div class="box1"> <p>IE中保持最小高度為150px</p> </div> <div class="box2" style="margin-right: 0;"> <p>最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定最小高度可以設(shè)定一個(gè)BOX的最小高度，當(dāng)其內(nèi)容較少時(shí)時(shí)，也能保持BOX的高度為一定</p> </div> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]