html div的宽度自适应,div宽度自适应一种简单的解决方案

大尺寸的显示屏盛行的现在，网页UI设计师经常会根据项目，来设计全屏网站，这样就面临一个网页宽度自适应的问题，在这里笔者给大家分享一个基于css的全屏网站解决方案。

上图是笔者写此文时候正在做的一个网站项目，因为行业特殊性，客户在笔者给的几个网站方案中选中了全屏幕大图片显示的网页设计风格，这个网站的首页是一张大尺寸全高清图片全屏显示，显得高端大气上档次，为了保持风格的统一，我也有必要把其他页面都做成全屏显示，这里不多做解释，这样做到结果就是我需要面临了自适应宽度全屏显示这样的一个问题。

虽然说现在的显示器分辨率都很大了，1366像素的宽度已经顶替1024像素成为主流到浏览器，但是我们还是无法抛弃1024*768的原始分辨率，因为就目前为止1024像素的浏览器尚有11%左右的市场份额，我们最常用的使用莫过于投影仪投影出来的分辨率，所以我们还是要保证800—1000分辨率到显示器的显示效果，并且在1920＊1080分辨率的显示器上显示出来又不能显的缺乏内容。

我从网上找了很多的全屏幕网站解决方案，发现了这个基于CSS的解决方案，通过实践，把它写出来分享给大家。

1.宽度自适应的条件

自适应宽度的层不要指定宽度和float属性

自适应宽度的层物理的位置放在最下面

自适应的div中不能出现“width=100%”，否则在ie6中会出现错位现象，ie7，ie8，ff3，chrome都正常。

 

2.div的默认(不写)宽度是100%，但不撑大父框架，写出width=100%是如果再使用了margin或padding就会将父框架撑大。

table默认宽度为内容的长度，与div不同，因此最好不要混着用，否者这个宽度自适应的方法在ie6下就有问题了。但高版本的浏览器都没问题，是不是

说以后大家都会忽略这两者之间的差异呢？

如果父框架设定了固定宽度，那么子div的宽度设为width=100%，即使设定了margin,padding或border都不会撑大父框架。