Web布局中的几种宽高自适应
前言
打开浏览器，输入一个网址，显示一个页面，页面最基本的布局和框架用户一目了然。但是用户所用的浏览器、显示器、分辨率大多都是不一样的，如何确保不同用户持有不同设备所看到同一个网址的页面显示内容相同呢？当然像亚马逊首页那一种布局会更个性化一些，它会根据用户持有设备的屏幕大小而现实内容。例如：一部PC机上可能一排现实5个商品，一部iPad上可能显示3个商品，而一部手机上可能一排只显示1个商品。至少不要 出现如下这种情况，在符合W3C标准的浏览器中显示正常，而在IE6,7中页面乱套，因为IE6,7仍然拥有很庞大的用户群；即使你做的Web应用是面向某些企业用户的，这种情况下用户较少，但你也不能强求用户使用哪一种浏览器。要解决这个问题，这就需要用到页面布局中的自适应，虽然这个问题看起来很简单。
我在这里将会介绍三种我最近在项目中用到的自适应：
- 页面整体宽度自适应 iframe宽高自适应 jqgrid高度自适应
先看看下面的页面基本布局图
页面分为三个部分：
(1) Header，这一部分宽度自适应
(2) Left 左边栏，为定宽200px，一般为菜单或导航
(3) Right右侧主内容区域，宽度自适应
既然做了分解，我们就把它当做需求来一步一步实现它吧，首先是Header区域。
请看代码1：
float: right;position: absolute;left: 240px;right: 30px;min-width: 790px;vertical-align:middle;text-align:center;overflow: hidden;}</style></head><body><div id=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。
?总结上面的代码中实际还是有一些问题的，在IE8中已经不支持expression表达式了，而且这种脚本式的css也影响代码的整体美观。除了最普通的一行式宽度自适应，其它种类的自适应都需要借助脚本来实现，想必大家现在已经知道最终的解决方案了，通过jquery + wresize插件能够做到兼容所有浏览器的宽高自适应。
?
Always keep dream, keep thinking, keep moving, even if the road obstacles , the one more important thing is that always be a pig for you, that's keep fool.
