如上面图显示，怎么让这幅图跟随着屏幕分辨率的变化而变化。

这是每个写CSS的人都会遇到的问题，这道题看似简单，但实际上在操作的时候你会遇到很多问题。这里面有圆角问题，有高度百分百问题，在做的过程中还会出现其它问题。推荐你自己尝试去实现一下，你会学到很多。

这个实现具我想到有两种方式，一种是用table，一种是用div的sprit做法。

先来讲讲传统的做法，要想达到宽度百分百，高度百分百，最简单的办法就是用table。。分为上中下，左中右结构，就是把四个圆角单独切出来，中间显示的背景横向平铺过去，这样就可以达到自适应的目的了。先看代码：

<table cellspacing="0" cellpadding="0" class="table">
	<thead>
		<tr>
			<th class="top_l">?</th>
			<th class="top_m">?</th>
			<th class="top_r">?</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="cen_l">?</td>
			<td class="cen_m">?</td>
			<td class="cen_r">?</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td class="bottom_l">?</td>
			<td class="bottom_m">?</td>
			<td class="bottom_r">?</td>
		</tr>
	</tfoot>
</table>

注意这个结构图需要用 &bnsp；空字符放在td里，否则背景图片在ie下不显示。

<style>
 .table {width:100%;height:100%;border:0;}
 .table .top_l {width:8px;height:29px;background:url(images/top_l.jpg) no-repeat;}
 .table .top_m {height:29px;background:url(images/top_m.jpg) no-repeat;}
 .table .top_r {width:8px;height:29px;background:url(images/top_r.jpg) no-repeat;}
 .cen_l, .cen_m, .cen_r {background:url(images/con_bg.jpg) repeat-x}
 .table .cen_l {border-left:1px solid #9c89d9;}
 .table .cen_m {}
 .table .cen_r {border-right:1px solid #9c89d9;}
 .table .bottom_l {width:8px;height:14px;background:url(images/bottom_l.jpg) no-repeat;}
 .table .bottom_m {height:14px;background:url(images/bottom_m.jpg) no-repeat;}
 .table .bottom_r {width:8px;height:14px;background:url(images/bottom_r.jpg) no-repeat;}
</style>

ok。图我就不切了，这样基本自适应框架就出来了。不知道你有没有发觉上面的代码有没有出现什么奇怪问题没有？

答案是上面的效果在firefox下圆角宽度会出现一个像素的空白。而这空白在ie是正常显示的，刚开始我一直想不通为什么，
以前也没有发现过table在firefox跟ie会有什么不同。我把出现异常的网页截了图放到fireworks里，量了一下才发现，原来table在firefox下有个最小宽度值9px，以前都是用平铺跟背景颜色，所以你看不到差别。把宽度设置为9px就可以解决，或者图片切成9px以上宽度，也默认会显示出来。

上面代码，其实如果 bottom_m 不用背景图像平铺，改成用 border-bottom:1px solid #9c89d9 你还会发现，它还有个最小高度19px，有兴趣的朋友可以试一下。

结论是：table在firefox下有最小宽度9px跟最小高度19px。

这种虽然能实现百分比显示，但是里面用到了太多多余的结构，如果把 cen_l 跟cen_r 删掉，cen_m 改成colspan=3
合并成一个td，然后控制左右两条线就ok了，但是你会发现整个表格都乱了。如果要显示内容，还得需要在 cen_m
里面嵌套一个表格，这种结构如果嵌套下去，坏处1，结构复杂，多余沉淀，可读性差；坏处2，难以驾驭。现在有很多人都在排斥表格，有些人坚持要全部用div+css布局，代码里面出现table感觉就是耻辱一样。其实table没那么坏的。table确实是个好东西，但是用得好的人很少。

现在来看第二种方法实现。实际上就是用到tab 的sprit方法实现的，看代码吧。

<div class="box">
	<div class="box_top"><span /></div>
	<div class="box_main"></div>
	<div class="box_bottom"><span /></div>
</div>

结构相比用table简单得多吧？实现的原理其实也就那么回事。我把切的图传上来，聪明的你一看就会明白的。图片显示不完整，请另存下来再打开。

原理，按照现在分辨率的宽度，把宽度定为2000px 这样就能跟着不同屏幕自动调整大小了。还是看代码吧，这样比较清晰点。

<style>
	.box {width:100%;height:100%;background:#fff;}
	.box_top {height:29px;background:url(images/box_bg.png) no-repeat;}
	.box_top span {height:29px;display:block;background:url(images/box_bg.png) no-repeat 100% -29px;}

	.box_bottom {height:6px;background:url(images/box_bg.png) no-repeat 0 -60px;overflow:hidden;}
	.box_bottom span{height:6px;display:block;background:url(images/box_bg.png) no-repeat 100% -66px;}

	.box_main {height:auto !important;min-height:380px;height:380px;border-left:1px solid #9cb9d9;border-right:1px solid #9cb9d9;background:url(images/back_bg2.jpg) repeat-x;}
</style>

这个实现高度100%其实并没有起作用，这里的效果只是一个固定的高度，然后当内容超过这个高度以后，自动增高而已。
如果非要让高度100%起作用，你只要加个样式。

	html,body {width:100%;}

但是如果情非得已，建议还是不要加好，这样会影响到全局的定义，对接下来内容的控制就更麻烦了。

我们可以看到div确实比table简洁，但是并不是说用table就有什么罪孽，在QQ、163的首页上，或者邮箱后台的应用，他们都用到了table，只要我们用得合理，那就是好的。没有人敢说自己就一定是对的，w3c也没有强制说你一定要这样做，它只是说，如果这样做会更好一些，说到底w3c标准只是一个检验代码规范的工具，不是一个衡量代码好坏的标准。