真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

Web布局中的寬高自適應(yīng)有哪些

本篇內(nèi)容介紹了“Web布局中的寬高自適應(yīng)有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

網(wǎng)站設(shè)計(jì)制作過程拒絕使用模板建站；使用PHP+MYSQL原生開發(fā)可交付網(wǎng)站源代碼;符合網(wǎng)站優(yōu)化排名的后臺(tái)管理系統(tǒng)；成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)收費(fèi)合理；免費(fèi)進(jìn)行網(wǎng)站備案等企業(yè)網(wǎng)站建設(shè)一條龍服務(wù).我們是一家持續(xù)穩(wěn)定運(yùn)營(yíng)了十年的成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司。

頁面整體寬度自適應(yīng)

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

頁面分為三個(gè)部分：

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

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

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

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

請(qǐng)看代碼1：

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

 

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

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

      body{  font-family: Arial, Helvetica, sans-serif;  margin: 0;  padding: 0;  }  #header  {  /* IE6 不支持min-width屬性，但是IE7+和W3C支持 */  min-width:1000px;  /* 用CSS表達(dá)式讓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可以來控制居中自適應(yīng)，但是如果需要頁邊距為30像素時(shí)用margin: 0 30px則不行了了(在Firefox滿屏是可以的，但瀏覽器縮小時(shí)，左側(cè)nargin是存在的，而右側(cè)被吃掉了)

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

 body{  font-family: Arial, Helvetica, sans-serif;  margin: 0;  padding: 0;  }  #header  {  /* IE6 不支持min-width屬性，但是IE7+和W3C支持 */  min-width:1000px;  /* 用CSS表達(dá)式讓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表達(dá)式讓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
   

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

View Code   
"text/css">
 body {
     margin:0;
     padding: 0;
 }
 #container {
     /* IE6 不支持min-width屬性，但是IE7+和W3C支持 */
     min-width:1000px;
     /* 用CSS表達(dá)式讓IE6也支持最小寬度 */
     _width:expression((document.documentelement.clientwidth||document.body.clientwidth)<1000?"1000px":"");
     margin: 0 auto;
 }
 #header {
     /* IE6 不支持min-width屬性，但是IE7+和W3C支持 */
     min-width:940px;
     height: 70px;
     padding-left: 30px;
     padding-right: 30px;
 }
 /* Header Content的實(shí)際寬度已經(jīng)為1002px了 */
 #header_content {
     width: 100%;
     border: 1px solid #ccc;
     height: 100%;
 }
 #main {
     padding-left:30px;
     padding-right: 30px;
     margin-top: 10px;
 }
 #main_content {
     width: 100%;
 }
 #left {
     border: 1px solid #ccc;
     width: 200px;
     float: left;
 }
 #right {
     border: 1px solid #ccc;
     float: right;
     min-width:700px;
 }
 
 "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
 "text/javascript">
     $(document).ready(function(){
             //調(diào)用函數(shù)
             var pagestyle = function() {
                 var right = $("#right");
                 // 請(qǐng)注意這個(gè)3減去300的實(shí)際算法
                 var w  = $(window).width() - 300;
                 if(w < 700){
                     w   = 700;
                 }
                 right.width(w);
             }
             // 窗體加載時(shí)自適應(yīng)寬度
             pagestyle();
             // 注冊(cè)窗體改變大小事件 
             $(window).resize(pagestyle);
     });
      
 
 "container">
   "header">
     "header_content"> "http://images.cnblogs.com/logo_small.gif" alt=""> 

   
   "main">
     "left">
       
Left

     
     "width: 1049px; " id="right">
       
Right

     
     

代碼中有幾處要注意的地方，我在下圖中有標(biāo)注出來，要查看運(yùn)行結(jié)果，請(qǐng)復(fù)制上面的代碼保存為html，所有url都是外部鏈接。

***部分終于講完了，呼~~~。

iframe寬高自適應(yīng)

有了前面的基礎(chǔ)，要做iframe的寬高自適應(yīng)就很簡(jiǎn)單了。iframe高度自適應(yīng)是根據(jù)屏幕的高度來的(無滾動(dòng)條)，寬度自適應(yīng)已經(jīng)通過前面的方式實(shí)現(xiàn)了，高度自適應(yīng)只需要對(duì)height屬性進(jìn)行計(jì)算處理就可以實(shí)現(xiàn)。

根據(jù)上面提供的代碼，要更改的地方很少。這里有一個(gè)完整的iframe例子下載：iframe auto width and height demo，代碼可以直接看里面的。

無圖無真相，還是截個(gè)圖看看吧。

jqgrid高度自適應(yīng)

jqgrid是一個(gè)較為強(qiáng)大的表格控件，對(duì)于它的介紹為不再贅述，至于它的用法和結(jié)合asp.net進(jìn)行ajax分頁的方式我將在下一篇講述(不是loading once的方式，loading once存在一些bug)。由于上面的iframe高度已經(jīng)根據(jù)屏幕的高度做了限制，而jqgrid提供了一頁顯示10,20,30條這種類似的選項(xiàng)，原有的高度是不可能讓30條數(shù)據(jù)顯示完全的。這就需要為jqgrid限制一個(gè)***高度，例如300px，當(dāng)內(nèi)容的高度超出300px時(shí)，jqgrid就得以豎向滾動(dòng)條滑動(dòng)來顯示內(nèi)容。

假定我們已經(jīng)為jqgrid綁定好數(shù)據(jù)源，jqgrid的高度為360px。要實(shí)現(xiàn)兼容所有瀏覽器的jqgrid高度自適應(yīng)，我們現(xiàn)在還需借助一個(gè)東西，http://noteslog.com/post/how-to-fix-the-resize-event-in-ie/，其實(shí)還是為了解決IE resize的bug。

還是截兩個(gè)效果圖，圖1每頁顯示10條，圖2每頁顯示30條。

“Web布局中的寬高自適應(yīng)有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！