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

作者：keepfool 2011-12-27 10:18:31

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

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

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

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

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

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

頁面整體寬度自適應(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：

<style type="text/css"> 
body{  
font-family: Arial, Helvetica, sans-serif;  
margin: 0;  
padding: 0;  
}  
#header  
{  
height: 70px;  
 margin: 20px 30px;  
padding: 0;  
border: 1px solid #ccc;  
}  
</style> 
</head> 
<body> 
<div id="header"> 
<img src="http://images.cnblogs.com/logo_small.gif" /> 
</div> 
</body>

關(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：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Header自適應(yīng)</title> 
<style type="text/css"> 
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%;  
}  
</style> 
</head> 
<body> 
<div id="header"> 
<div id="header_content"> 
<img src="http://images.cnblogs.com/logo_small.gif" /> 
</div> 
</div> 
</div> 
</body> 
</html>

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

#p#

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：

<style type="text/css"> 
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;  
}  
</style> 
</head> 
<body> 
<div id="header"> 
<div id="header_content"> 
<img src="http://images.cnblogs.com/logo_small.gif" /> 
</div> 
</div> 
<div id="main"> 
<div id="left"> 
<h2>Left</h2> 
</div> 
<div id="right"> 
<h2>Right</h2> 
</div> 
</div> 
</body>

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

<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> 
<div id="cnblogs_code_open_d604edb5-b6c0-422e-ae1e-fdb13734bf43" class="cnblogs_code_hide"> 
<div><style type=<span style="color: #800000;">"</span><span style="color: #800000;">text/css</span><span style="color: #800000;">"</span>><br> 
body {<br> 
    margin:<span style="color: #800080;">0</span>;<br> 
    padding: <span style="color: #800080;">0</span>;<br> 
}<br> 
#container {<br> 
    <span style="color: #008000;">/*</span><span style="color: #008000;"> IE6 不支持min-width屬性，但是IE7+和W3C支持 </span><span style="color: #008000;">*/</span><br> 
    min-width:1000px;<br> 
    <span style="color: #008000;">/*</span><span style="color: #008000;"> 用CSS表達(dá)式讓IE6也支持最小寬度 </span><span style="color: #008000;">*/</span><br> 
    _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> 
    margin: <span style="color: #800080;">0</span> auto;<br> 
}<br> 
#header {<br> 
    <span style="color: #008000;">/*</span><span style="color: #008000;"> IE6 不支持min-width屬性，但是IE7+和W3C支持 </span><span style="color: #008000;">*/</span><br> 
    min-width:940px;<br> 
    height: 70px;<br> 
    padding-left: 30px;<br> 
    padding-right: 30px;<br> 
}<br> 
<span style="color: #008000;">/*</span><span style="color: #008000;"> Header Content的實(shí)際寬度已經(jīng)為1002px了 </span><span style="color: #008000;">*/</span><br> 
#header_content {<br> 
    width: <span style="color: #800080;">100</span>%;<br> 
    border: 1px solid #ccc;<br> 
    height: <span style="color: #800080;">100</span>%;<br> 
}<br> 
#main {<br> 
    padding-left:30px;<br> 
    padding-right: 30px;<br> 
    margin-top: 10px;<br> 
}<br> 
#main_content {<br> 
    width: <span style="color: #800080;">100</span>%;<br> 
}<br> 
#left {<br> 
    border: 1px solid #ccc;<br> 
    width: 200px;<br> 
    <span style="color: #0000FF;">float</span>: left;<br> 
}<br> 
#right {<br> 
    border: 1px solid #ccc;<br> 
    <span style="color: #0000FF;">float</span>: right;<br> 
    min-width:700px;<br> 
}<br> 
</style><br> 
<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> 
<script type=<span style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span>><br> 
    $(document).ready(function(){<br> 
            <span style="color: #008000;">//</span><span style="color: #008000;">調(diào)用函數(shù)</span><span style="color: #008000;"><br> 
</span>            <span style="color: #0000FF;">var</span> pagestyle = function() {<br> 
                <span style="color: #0000FF;">var</span> right = $(<span style="color: #800000;">"</span><span style="color: #800000;">#right</span><span style="color: #800000;">"</span>);<br> 
                <span style="color: #008000;">//</span><span style="color: #008000;"> 請(qǐng)注意這個(gè)3減去300的實(shí)際算法</span><span style="color: #008000;"><br> 
</span>                <span style="color: #0000FF;">var</span> w  = $(window).width() - <span style="color: #800080;">300</span>;<br> 
                <span style="color: #0000FF;">if</span>(w < <span style="color: #800080;">700</span>){<br> 
                    w   = <span style="color: #800080;">700</span>;<br> 
                }<br> 
                right.width(w);<br> 
            }<br> 
            <span style="color: #008000;">//</span><span style="color: #008000;"> 窗體加載時(shí)自適應(yīng)寬度</span><span style="color: #008000;"><br> 
</span>            pagestyle();<br> 
            <span style="color: #008000;">//</span><span style="color: #008000;"> 注冊(cè)窗體改變大小事件 </span><span style="color: #008000;"><br> 
</span>            $(window).resize(pagestyle);<br> 
    });<br> 
     <br> 
</script><br> 
<div id=<span style="color: #800000;">"</span><span style="color: #800000;">container</span><span style="color: #800000;">"</span>><br> 
  <div id=<span style="color: #800000;">"</span><span style="color: #800000;">header</span><span style="color: #800000;">"</span>><br> 
    <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> 
  </div><br> 
  <div id=<span style="color: #800000;">"</span><span style="color: #800000;">main</span><span style="color: #800000;">"</span>><br> 
    <div id=<span style="color: #800000;">"</span><span style="color: #800000;">left</span><span style="color: #800000;">"</span>><br> 
      <h2>Left</h2><br> 
    </div><br> 
    <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> 
      <h2>Right</h2><br> 
    </div><br> 
  </div></div> 
</div> 
</div>

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

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

#p#

iframe寬高自適應(yīng)

有了前面的基礎(chǔ)，要做iframe的寬高自適應(yīng)就很簡單了。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條。

總結(jié)

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

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

【編輯推薦】