自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Web布局中的幾種寬高自適應(yīng)

作者：keepfool
開發(fā) 前端
打開瀏覽器，輸入一個網(wǎng)址，顯示一個頁面，頁面最基本的布局和框架用戶一目了然。但是用戶所用的瀏覽器、顯示器、分辨率大多都是不一樣的，如何確保不同用戶持有不同設(shè)備所看到同一個網(wǎng)址的頁面顯示內(nèi)容相同呢?

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

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

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

◆ iframe寬高自適應(yīng)

◆ jqgrid高度自適應(yīng)

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

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

 

image

 

頁面分為三個部分：

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

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

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

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

請看代碼1：

  1. <style type="text/css"> 
  2. body{  
  3. font-family: Arial, Helvetica, sans-serif;  
  4. margin: 0;  
  5. padding: 0;  
  6. }  
  7. #header  
  8. {  
  9. height: 70px;  
  10.  margin: 20px 30px;  
  11. padding: 0;  
  12. border: 1px solid #ccc;  
  13. }  
  14. </style> 
  15. </head> 
  16. <body> 
  17. <div id="header"> 
  18. <img src="http://images.cnblogs.com/logo_small.gif" /> 
  19. </div> 
  20. </body> 

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>Header自適應(yīng)</title> 
  6. <style type="text/css"> 
  7. body{  
  8. font-family: Arial, Helvetica, sans-serif;  
  9. margin: 0;  
  10. padding: 0;  
  11. }  
  12. #header  
  13. {  
  14. /* IE6 不支持min-width屬性，但是IE7+和W3C支持 */  
  15. min-width:1000px;  
  16. /* 用CSS表達(dá)式讓IE6也支持最小寬度 */  
  17. _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");  
  18. height: 70px;  
  19.  padding-left: 30px;  
  20. padding-right: 30px;  
  21. }  
  22. #header_content{  
  23. width: 100%;  
  24. border: 1px solid #ccc;  
  25. height: 100%;  
  26. }  
  27. </style> 
  28. </head> 
  29. <body> 
  30. <div id="header"> 
  31. <div id="header_content"> 
  32. <img src="http://images.cnblogs.com/logo_small.gif" /> 
  33. </div> 
  34. </div> 
  35. </div> 
  36. </body> 
  37. </html> 

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

#p#

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

  1. <style type="text/css"> 
  2. body{  
  3. font-family: Arial, Helvetica, sans-serif;  
  4. margin: 0;  
  5. padding: 0;  
  6. }  
  7. #header  
  8. {  
  9. /* IE6 不支持min-width屬性，但是IE7+和W3C支持 */  
  10. min-width:1000px;  
  11. /* 用CSS表達(dá)式讓IE6也支持最小寬度 */  
  12. _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");  
  13. height: 70px;  
  14. padding-left: 30px;  
  15. padding-right: 30px;  
  16. }  
  17. #header_content{  
  18. width: 100%;  
  19. border: 1px solid #ccc;  
  20. height: 100%;  
  21. }  
  22. #main{  
  23. /* IE6 不支持min-width屬性，但是IE7+和W3C支持 */  
  24. min-width:1000px;  
  25. /* 用CSS表達(dá)式讓IE6也支持最小寬度 */  
  26. _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");  
  27. height: 70px;  
  28. padding-left: 30px;  
  29. padding-right: 30px;  
  30. margin-top: 20px;  
  31. }  
  32. #left{  
  33. border: 1px solid #ccc;  
  34. float: left;  
  35. vertical-align:middle;  
  36. text-align:center;  
  37. width: 200px;  
  38. }  
  39. #right{  
  40. border: 1px solid #ccc;  
  41.  float: right;  
  42. position: absolute;  
  43. left: 240px;  
  44. right: 30px;  
  45. min-width: 790px;  
  46. vertical-align:middle;  
  47. text-align:center;  
  48. overflow: hidden;  
  49. }  
  50. </style> 
  51. </head> 
  52. <body> 
  53. <div id="header"> 
  54. <div id="header_content"> 
  55. <img src="http://images.cnblogs.com/logo_small.gif" /> 
  56. </div> 
  57. </div> 
  58. <div id="main"> 
  59. <div id="left"> 
  60. <h2>Left</h2> 
  61. </div> 
  62. <div id="right"> 
  63. <h2>Right</h2> 
  64. </div> 
  65. </div> 
  66. </body> 

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

  1. <div class="cnblogs_code" onclick="cnblogs_code_show('d604edb5-b6c0-422e-ae1e-fdb13734bf43')"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" class="code_img_closed" id="code_img_closed_d604edb5-b6c0-422e-ae1e-fdb13734bf43" alt=""><img src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" class="code_img_opened" id="code_img_opened_d604edb5-b6c0-422e-ae1e-fdb13734bf43" onclick="cnblogs_code_hide('d604edb5-b6c0-422e-ae1e-fdb13734bf43',event)" style="display:none"><span class="cnblogs_code_collapse">View Code </span> 
  2. <div id="cnblogs_code_open_d604edb5-b6c0-422e-ae1e-fdb13734bf43" class="cnblogs_code_hide"> 
  3. <div><style type=<span style="color: #800000;">"</span><span style="color: #800000;">text/css</span><span style="color: #800000;">"</span>><br> 
  4. body {<br> 
  5.     margin:<span style="color: #800080;">0</span>;<br> 
  6.     padding: <span style="color: #800080;">0</span>;<br> 
  7. }<br> 
  8. #container {<br> 
  9.     <span style="color: #008000;">/*</span><span style="color: #008000;"> IE6 不支持min-width屬性，但是IE7+和W3C支持 </span><span style="color: #008000;">*/</span><br> 
  10.     min-width:1000px;<br> 
  11.     <span style="color: #008000;">/*</span><span style="color: #008000;"> 用CSS表達(dá)式讓IE6也支持最小寬度 </span><span style="color: #008000;">*/</span><br> 
  12.     _width:expression((document.documentelement.clientwidth||document.body.clientwidth)<<span style="color: #800080;">1000</span>?<span style="color: #800000;">"</span><span style="color: #800000;">1000px</span><span style="color: #800000;">"</span>:<span style="color: #800000;">""</span>);<br> 
  13.     margin: <span style="color: #800080;">0</span> auto;<br> 
  14. }<br> 
  15. #header {<br> 
  16.     <span style="color: #008000;">/*</span><span style="color: #008000;"> IE6 不支持min-width屬性，但是IE7+和W3C支持 </span><span style="color: #008000;">*/</span><br> 
  17.     min-width:940px;<br> 
  18.     height: 70px;<br> 
  19.     padding-left: 30px;<br> 
  20.     padding-right: 30px;<br> 
  21. }<br> 
  22. <span style="color: #008000;">/*</span><span style="color: #008000;"> Header Content的實際寬度已經(jīng)為1002px了 </span><span style="color: #008000;">*/</span><br> 
  23. #header_content {<br> 
  24.     width: <span style="color: #800080;">100</span>%;<br> 
  25.     border: 1px solid #ccc;<br> 
  26.     height: <span style="color: #800080;">100</span>%;<br> 
  27. }<br> 
  28. #main {<br> 
  29.     padding-left:30px;<br> 
  30.     padding-right: 30px;<br> 
  31.     margin-top: 10px;<br> 
  32. }<br> 
  33. #main_content {<br> 
  34.     width: <span style="color: #800080;">100</span>%;<br> 
  35. }<br> 
  36. #left {<br> 
  37.     border: 1px solid #ccc;<br> 
  38.     width: 200px;<br> 
  39.     <span style="color: #0000FF;">float</span>: left;<br> 
  40. }<br> 
  41. #right {<br> 
  42.     border: 1px solid #ccc;<br> 
  43.     <span style="color: #0000FF;">float</span>: right;<br> 
  44.     min-width:700px;<br> 
  45. }<br> 
  46. </style><br> 
  47. <script type=<span style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span> src=<span style="color: #800000;">"</span><span style="color: #800000;">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js</span><span style="color: #800000;">"</span>></script><br> 
  48. <script type=<span style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span>><br> 
  49.     $(document).ready(function(){<br> 
  50.             <span style="color: #008000;">//</span><span style="color: #008000;">調(diào)用函數(shù)</span><span style="color: #008000;"><br> 
  51. </span>            <span style="color: #0000FF;">var</span> pagestyle = function() {<br> 
  52.                 <span style="color: #0000FF;">var</span> right = $(<span style="color: #800000;">"</span><span style="color: #800000;">#right</span><span style="color: #800000;">"</span>);<br> 
  53.                 <span style="color: #008000;">//</span><span style="color: #008000;"> 請注意這個3減去300的實際算法</span><span style="color: #008000;"><br> 
  54. </span>                <span style="color: #0000FF;">var</span> w  = $(window).width() - <span style="color: #800080;">300</span>;<br> 
  55.                 <span style="color: #0000FF;">if</span>(w < <span style="color: #800080;">700</span>){<br> 
  56.                     w   = <span style="color: #800080;">700</span>;<br> 
  57.                 }<br> 
  58.                 right.width(w);<br> 
  59.             }<br> 
  60.             <span style="color: #008000;">//</span><span style="color: #008000;"> 窗體加載時自適應(yīng)寬度</span><span style="color: #008000;"><br> 
  61. </span>            pagestyle();<br> 
  62.             <span style="color: #008000;">//</span><span style="color: #008000;"> 注冊窗體改變大小事件 </span><span style="color: #008000;"><br> 
  63. </span>            $(window).resize(pagestyle);<br> 
  64.     });<br> 
  65.      <br> 
  66. </script><br> 
  67. <div id=<span style="color: #800000;">"</span><span style="color: #800000;">container</span><span style="color: #800000;">"</span>><br> 
  68.   <div id=<span style="color: #800000;">"</span><span style="color: #800000;">header</span><span style="color: #800000;">"</span>><br> 
  69.     <div id=<span style="color: #800000;">"</span><span style="color: #800000;">header_content</span><span style="color: #800000;">"</span>> <img src=<span style="color: #800000;">"</span><span style="color: #800000;">http://images.cnblogs.com/logo_small.gif</span><span style="color: #800000;">"</span> alt=<span style="color: #800000;">""</span>> </div><br> 
  70.   </div><br> 
  71.   <div id=<span style="color: #800000;">"</span><span style="color: #800000;">main</span><span style="color: #800000;">"</span>><br> 
  72.     <div id=<span style="color: #800000;">"</span><span style="color: #800000;">left</span><span style="color: #800000;">"</span>><br> 
  73.       <h2>Left</h2><br> 
  74.     </div><br> 
  75.     <div style=<span style="color: #800000;">"</span><span style="color: #800000;">width: 1049px; </span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">right</span><span style="color: #800000;">"</span>><br> 
  76.       <h2>Right</h2><br> 
  77.     </div><br> 
  78.   </div></div> 
  79. </div> 
  80. </div> 
 

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

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

#p#

iframe寬高自適應(yīng)

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

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

無圖無真相，還是截個圖看看吧。

 

image

 

jqgrid高度自適應(yīng)

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

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

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

 

image

 

 

image

 

總結(jié)

上面的代碼中實際還是有一些問題的，在IE8中已經(jīng)不支持expression表達(dá)式了，而且這種腳本式的css也影響代碼的整體美觀。除了最普通的一行式寬度自適應(yīng)，其它種類的自適應(yīng)都需要借助腳本來實現(xiàn)，想必大家現(xiàn)在已經(jīng)知道最終的解決方案了，通過jquery + wresize插件能夠做到兼容所有瀏覽器的寬高自適應(yīng)。

原文：http://www.cnblogs.com/keepfool/archive/2011/12/26/2302186.html

【編輯推薦】

  1. 五個聽起來美妙但不靠譜的Web策略
  2. Mozilla技術(shù)布道者給Web開發(fā)者推薦Firefox插件列表
  3. Web設(shè)計VS App設(shè)計：互相學(xué)習(xí)到了什么
  4. Web前端開發(fā)有“前”沒錢？
  5. 2011年Web開發(fā)領(lǐng)域回顧與展望
責(zé)任編輯：陳貽新 來源： keepfool的博客
Web
相關(guān)推薦

2017-06-06 10:30:12

前端Web寬度自適應(yīng)

2014-09-05 10:10:32

Android自適應(yīng)布局設(shè)計

2012-06-04 09:48:04

jQuery

2010-08-26 16:27:46

CSS高度

2013-09-04 11:02:52

手機web網(wǎng)頁設(shè)計

2018-11-01 17:06:06

cell自適應(yīng)高主

2023-11-16 09:50:56

鴻蒙自適應(yīng)布局

2025-01-21 08:00:00

自適應(yīng)框架框架開發(fā)

2021-04-28 09:56:44

鴻蒙HarmonyOS應(yīng)用

2024-06-19 08:32:13

2022-10-24 17:57:06

CSS容器查詢

2012-05-09 10:58:25

JavaMEJava

2010-08-30 09:52:03

DIV高度自適應(yīng)

2024-01-09 13:34:35

2023-07-31 08:24:34

MySQL索引計數(shù)

2010-08-30 10:26:20

DIV自適應(yīng)高度

2014-04-15 13:09:08

Android配色colour

2015-06-08 10:49:04

2023-08-28 08:00:45

2010-08-30 09:22:13

DIV高度自適應(yīng)
點贊
收藏

51CTO技術(shù)棧公眾號