盗墓笔记第二季,欢乐颂小说结局

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

Web布局中的幾種寬高自適應

當然像亞馬遜首頁那一種布局會更個性化一些，它會根據(jù)用戶持有設備的屏幕大小而現(xiàn)實內(nèi)容。例如：一部PC機上可能一排現(xiàn)實5個商品，一部iPad上可能顯示3個商品，而一部手機上可能一排只顯示1個商品。至少不要出現(xiàn)如下這種情況，在符合W3C標準的瀏覽器中顯示正常，而在IE6,7中頁面亂套，因為IE6,7仍然擁有很龐大的用戶群;即使你做的Web應用是面向某些企業(yè)用戶的，這種情況下用戶較少，但你也不能強求用戶使用哪一種瀏覽器。要解決這個問題，這就需要用到頁面布局中的自適應，雖然這個問題看起來很簡單。

我在這里將會介紹三種我最近在項目中用到的自適應：

◆ 頁面整體寬度自適應

◆ iframe寬高自適應

◆ jqgrid高度自適應

頁面整體寬度自適應

先看看下面的頁面基本布局圖

頁面分為三個部分：

(1) Header，這一部分寬度自適應

(2) Left 左邊欄，為定寬200px，一般為菜單或?qū)Ш?/p>

(3) Right右側(cè)主內(nèi)容區(qū)域，寬度自適應

既然做了分解，我們就把它當做需求來一步一步實現(xiàn)它吧，首先是Header區(qū)域。

請看代碼1：

 
 
 
 
  
  
  
     
  
  
  body{    
  
  
  font-family: Arial, Helvetica, sans-serif;    
  
  
  margin: 0;    
  
  
  padding: 0;    
  
  
  }    
  
  
  #header    
  
  
  {    
  
  
  height: 70px;    
  
  
   margin: 20px 30px;    
  
  
  padding: 0;    
  
  
  border: 1px solid #ccc;    
  
  
  }

關鍵的代碼只有一行，我已經(jīng)標出。

現(xiàn)在有一個問題了，如果Header的內(nèi)容也比較豐富，可能Logo + Banner的總寬度為1000px了，但有些小屏幕卻看不完整，這時我們得為這個Header 加個最小寬度限制。在IE 7 +和W3C瀏覽器中，擁有一個min-width屬性可以實現(xiàn)這個效果，但是IE6不支持(參照各版本IE瀏覽器CSS兼容性列表)。不過css expression可以幫我們解決這個問題，請看代碼2：

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
     
  
  
  Header自適應   
  
  
     
  
  
  body{    
  
  
  font-family: Arial, Helvetica, sans-serif;    
  
  
  margin: 0;    
  
  
  padding: 0;    
  
  
  }    
  
  
  #header    
  
  
  {    
  
  
  /* IE6 不支持min-width屬性，但是IE7+和W3C支持 */    
  
  
  min-width:1000px;    
  
  
  /* 用CSS表達式讓IE6也支持最小寬度 */    
  
  
  _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");    
  
  
  height: 70px;    
  
  
   padding-left: 30px;    
  
  
  padding-right: 30px;    
  
  
  }    
  
  
  #header_content{    
  
  
  width: 100%;    
  
  
  border: 1px solid #ccc;    
  
  
  height: 100%;    
  
  
  }

在代碼2中我并沒有直接更改#header用margin屬性來控制，雖說margin:0 auto可以來控制居中自適應，但是如果需要頁邊距為30像素時用margin: 0 30px則不行了了(在Firefox滿屏是可以的，但瀏覽器縮小時，左側(cè)nargin是存在的，而右側(cè)被吃掉了)

#p#

OK，現(xiàn)在已經(jīng)實現(xiàn)Header部分的居中自適應了，下面的Left和Right也不會麻煩。雖然上面的Header層使用了expression來實現(xiàn)寬度自適應，但是下面的Right層則不能使用同樣的方式，因為Header層依賴的是body，而Right層則不是。如果不考慮IE6的存在，則用如下代碼就可以實現(xiàn)本文開頭的布局圖。請看代碼3：

 
 
 
 
  
  
  
     
  
  
  body{    
  
  
  font-family: Arial, Helvetica, sans-serif;    
  
  
  margin: 0;    
  
  
  padding: 0;    
  
  
  }    
  
  
  #header    
  
  
  {    
  
  
  /* IE6 不支持min-width屬性，但是IE7+和W3C支持 */    
  
  
  min-width:1000px;    
  
  
  /* 用CSS表達式讓IE6也支持最小寬度 */    
  
  
  _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");    
  
  
  height: 70px;    
  
  
  padding-left: 30px;    
  
  
  padding-right: 30px;    
  
  
  }    
  
  
  #header_content{    
  
  
  width: 100%;    
  
  
  border: 1px solid #ccc;    
  
  
  height: 100%;    
  
  
  }    
  
  
  #main{    
  
  
  /* IE6 不支持min-width屬性，但是IE7+和W3C支持 */    
  
  
  min-width:1000px;    
  
  
  /* 用CSS表達式讓IE6也支持最小寬度 */    
  
  
  _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");    
  
  
  height: 70px;    
  
  
  padding-left: 30px;    
  
  
  padding-right: 30px;    
  
  
  margin-top: 20px;    
  
  
  }    
  
  
  #left{    
  
  
  border: 1px solid #ccc;    
  
  
  float: left;    
  
  
  vertical-align:middle;    
  
  
  text-align:center;    
  
  
  width: 200px;    
  
  
  }    
  
  
  #right{    
  
  
  border: 1px solid #ccc;    
  
  
   float: right;    
  
  
  position: absolute;    
  
  
  left: 240px;    
  
  
  right: 30px;    
  
  
  min-width: 790px;    
  
  
  vertical-align:middle;    
  
  
  text-align:center;    
  
  
  overflow: hidden;    
  
  
  }

Left

Right

紅色部分標出的是關鍵代碼，又回到之前的問題了，min-width屬性在IE6中不支持，所以你在IE6中運行代碼3將得不到我們預期的結(jié)果。那么，現(xiàn)在就要借助js來實現(xiàn)這個效果了。請看代碼4：

新聞中心

Left

Right

Left

Right

其他資訊