css中的min-width

我們在做佈局設計時，經常有這樣的佈局，兩邊或者一邊是導航類工具欄 ，中間是內容區域。

 

但我們希望中間的內區域能夠自動適應，隨着不同的分辨率和瀏覽器的大小自動適應高度和寬度，以獲得較好的顯示效果。

 

我們假設中間的內容區域是個div，如果我們不明確設置它樣式的width屬性，它是可以自動適應的，按說這滿足了要求。

 

但是當瀏覽器的寬度過小時，小到已經不能整齊的顯示我們的內容，頁面的顯示就會混亂不堪。

 

這時我們可以爲該內容div設置一個min-width,比如在css中：

#content{
     min-width:600px;
}

 這個屬性的功能就像它的名字一樣簡單：最小寬度。該div還是自動適應寬度，但它多了個條件，當它自適應的寬度小於設置的最小寬度時，就會把該div的寬度設置爲最小寬度，不再自動適應。

 

這個屬性在firefox和ie7中是可以使用的，但在ie6中不支持，我們可以用下面這段代碼代替：

#content{
  _width: expression(((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700? '600px' : 'auto');
}

 前面的這段：

((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700

 只是個判定條件，判定頁面body的寬度，這裏的是，如果頁面body的寬度小於700（這個要根據具體的頁面來指定），就把content的寬度指定爲600，否則就讓它自適應寬度。

 

 

其實min-height也同理！