前言

打開瀏覽器，輸入一個網址，顯示一個頁面，頁面最基本的布局和框架用戶一目了然。但是用戶所用的瀏覽器、顯示器、分辨率大多都是不一樣的，如何確保不同用戶持有不同設備所看到同一個網址的頁面顯示內容相同呢？當然像亞馬遜首頁那一種布局會更個性化一些，它會根據用戶持有設備的屏幕大小而現實內容。例如：一部PC機上可能一排現實5個商品，一部iPad上可能顯示3個商品，而一部手機上可能一排只顯示1個商品。至少不要出現如下這種情況，在符合W3C標准的瀏覽器中顯示正常，而在IE6,7中頁面亂套，因為IE6,7仍然擁有很龐大的用戶群；即使你做的Web應用是面向某些企業用戶的，這種情況下用戶較少，但你也不能強求用戶使用哪一種瀏覽器。要解決這個問題，這就需要用到頁面布局中的自適應，雖然這個問題看起來很簡單。

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

頁面整體寬度自適應
iframe寬高自適應
jqgrid高度自適應

頁面整體寬度自適應

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

頁面分為三個部分：
(1) Header，這一部分寬度自適應
(2) Left 左邊欄，為定寬200px，一般為菜單或導航
(3) Right右側主內容區域，寬度自適應

既然做了分解，我們就把它當做需求來一步一步實現它吧，首先是Header區域。
請看代碼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>

關鍵的代碼只有一行，我已經標出。
現在有一個問題了，如果Header的內容也比較豐富，可能Logo + Banner的總寬度為1000px了，但有些小屏幕卻看不完整，這時我們得為這個Header 加個最小寬度限制。在IE 7 +和W3C瀏覽器中，擁有一個min-width屬性可以實現這個效果，但是IE6不支持（參照各版本IE瀏覽器CSS兼容性列表）。不過css expression可以幫我們解決這個問題，請看代碼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自適應</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表達式讓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可以來控制居中自適應，但是如果需要頁邊距為30像素時用margin: 0 30px則不行了了（在Firefox滿屏是可以的，但瀏覽器縮小時，左側nargin是存在的，而右側被吃掉了）

OK，現在已經實現Header部分的居中自適應了，下面的Left和Right也不會麻煩。雖然上面的Header層使用了expression來實現寬度自適應，但是下面的Right層則不能使用同樣的方式，因為Header層依賴的是body，而Right層則不是。如果不考慮IE6的存在，則用如下代碼就可以實現本文開頭的布局圖。請看代碼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表達式讓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;
}
</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>

紅色部分標出的是關鍵代碼，又回到之前的問題了，min-width屬性在IE6中不支持，所以你在IE6中運行代碼3將得不到我們預期的結果。那么，現在就要借助js來實現這個效果了。請看代碼4：代碼中有幾處要注意的地方，我在下圖中有標注出來，要查看運行結果，請復制上面的代碼保存為html，所有url都是外部鏈接。

View Code

<! 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 >寬度自適應 </ title >
< style type ="text/css" >
body {
    margin : 0 ;
    padding : 0 ;
}
#container
{
     /* IE6 不支持min-width屬性，但是IE7+和W3C支持 */
    min-width : 1000px ;
     /* 用CSS表達式讓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的實際寬度已經為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 ;
}
</ style >
< script type ="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></ script >
< script type ="text/javascript" >
    $(document).ready( function (){
             // 調用函數
             var pagestyle = function () {
                 var right = $( " #right " );
                 // 請注意這個3減去300的實際算法
                 var w   = $(window).width() - 300 ;
                 if (w < 700 ){
                    w      = 700 ;
                }
                right.width(w);
            }
             // 窗體加載時自適應寬度
            pagestyle();
             // 注冊窗體改變大小事件
            $(window).resize(pagestyle);
    });

</ script >
</ head >
< body >
< div id ="container" >
< 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 >
</ div >
</ body >
</ html >

第一部分終於講完了，呼~~~。

iframe寬高自適應

有了前面的基礎，要做iframe的寬高自適應就很簡單了。iframe高度自適應是根據屏幕的高度來的（無滾動條），寬度自適應已經通過前面的方式實現了，高度自適應只需要對height屬性進行計算處理就可以實現。

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

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

jqgrid高度自適應

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

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

<!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></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" src="js/jquery.wresize.js"></script>
<script type="text/javascript">
/* jqgrid綁定數據源，設置屬性*/
$(function() {
$("#gridTable").jqGrid({
url: "...",
datatype: "json",
shrinkToFit: true,
width: "836",
height: "360",
colNames: [...],
colModel: [
...
],
jsonReader: {
...
},
prmNames: {
page: 'PageNumber',
rows: 'PageSize',
sort: 'OrderBy',
order: 'Sort'
},
loadonce: false,
sortname: 'FullDateTime',
sortorder: 'desc',
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: "#gridPager"
}).navGrid('#pager2', { edit: false, add: false, del: false });
});
</script>
<script type="text/javascript">
$(document).ready(function() {
function content_resize() {
var grid = $("#gridTable");
var h = $(window).height() - grid.offset().top - 30;
$('.ui-jqgrid-bdiv').css("height", h);
}
// 借助wresize插件解決IE resize的bug.
$(window).wresize(content_resize);
content_resize();
});
</script>
</head>
<body>
<table id="gridTable">
</table>
<div id="gridPager"> </div>
</body>
</html>

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

總結

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 三欄布局（二）-------上下寬高固定，中間自適應 iframe寬高自適應 React組件自適應窗口寬高 CSS基礎布局--居中對齊，左側定寬右側自適應左邊定寬，右邊自適應兩列布局小程序------圖片自適應寬高的計算類 CSS實現寬度自適應寬高16:9的矩形 XtraReport交叉表自適應行高及最佳列寬 css樣式：寬高按一定比例進行自適應布局的幾種方式（靜態布局、自適應布局、流式布局、響應式布局、彈性布局）