Web布局中的几种宽高自适应

当然像亚马逊首页那一种布局会更个性化一些，它会根据用户持有设备的屏幕大小而现实内容。例如：一部PC机上可能一排现实5个商品，一部iPad上可能显示3个商品，而一部手机上可能一排只显示1个商品。至少不要出现如下这种情况，在符合W3C标准的浏览器中显示正常，而在IE6,7中页面乱套，因为IE6,7仍然拥有很庞大的用户群;即使你做的Web应用是面向某些企业用户的，这种情况下用户较少，但你也不能强求用户使用哪一种浏览器。要解决这个问题，这就需要用到页面布局中的自适应，虽然这个问题看起来很简单。

我在这里将会介绍三种我最近在项目中用到的自适应：

◆ 页面整体宽度自适应

◆ iframe宽高自适应

◆ jqgrid高度自适应

页面整体宽度自适应

先看看下面的页面基本布局图

页面分为三个部分：

(1) Header，这一部分宽度自适应

(2) Left 左边栏，为定宽200px，一般为菜单或导航

(3) Right右侧主内容区域，宽度自适应

既然做了分解，我们就把它当做需求来一步一步实现它吧，首先是Header区域。

请看代码1：

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

关键的代码只有一行，我已经标出。

现在有一个问题了，如果Header的内容也比较丰富，可能Logo + Banner的总宽度为1000px了，但有些小屏幕却看不完整，这时我们得为这个Header 加个最小宽度限制。在IE 7 +和W3C浏览器中，拥有一个min-width属性可以实现这个效果，但是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%;    
  
  
  }

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

View Code
"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;
}
"text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
"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);
});
"container">
"header">
"header_content"> "http://images.cnblogs.com/logo_small.gif" alt="">
"main">
"left">
Left
"width: 1049px; " id="right">
Right