css+div中的百分比自适应宽度布局

      在css页面布局中，我们常常会遇到适应显示器分辨率的问题，目前主流的1440*900，笔记本中主流的1280*800，目前上网本的1024*600，还有一些老的17寸1024*768。甚至还有一些追求最新的，用的更大的显示器。我们要让自己网站在各种分辨率下都显示正常，达到最理想的显示效果。就需要让自己的网站自适应显示器的宽度。

一种简单的方法是两列的网站，一列设置固定宽度，另外一列使用auto，让其自适应浏览器宽度，自使用宽度的部分多为大段文字，这样可以达到自适应宽度的目的。但是当内容相对复杂的时候会有一个问题，当显示器过宽的时候，固定宽度的部分就相对太窄了，这样影响整体效果。我们需要的是当页面变宽的时候，每一部分都随着改变。这样，我们就用到了百分比布局。

 

 

     在使用百分比布局的时候需要注意的几点：

1.你所设置的百分比，是针对他的父级元素来说的，而不是浏览器的宽度。

 

2.当你设置了width：100%时，请避免设置margin和padding。因为你的div实际宽度将是width+margin+padding 从而大于外框。

 

3.每一行中，如果存在多个div，尽量不要让他们的总宽度刚好等于100%。

 

原因是，当像素数出现小数时，浏览器是采取四舍五入的方式计算的。比如你的外框是11像素宽，里边的两个div的宽带均设置为50%，则计算为5.5px,浏览器四舍五入的算法得出6px，所以总宽度将变成12px，超出了外框的总宽度。所以我们在设置的时候尽量不要把总宽度设置成100%。

 

4.为整个网站设置最小宽度，为了保证用户在任何浏览器窗口中都能正常浏览，避免那种极端小的浏览器窗口，你可以写上min-width 以保证页面不变形，在浏览器窗口极小时出现横向滚动条。但是IE6是不支持此属性的，可以针对IE6使用js控制一下。

 

       坚持了上面的几项，你就能像使用像素来布局的一样通过css顺利的布局了。

 

 

 

 

文章作者：IceSun
本文地址：http://www.iscss.tk/?p=72
版权所有 © 转载时必须以链接形式注明作者和原始出处！