DIV CSS 如何让网页中的某DIV自动适应屏幕高度自己变如下图

1、首先创建或者打开我们的web项目，新建一个html文件和css文件即可，如图所示。

2、html页面代码如图所示，定义一个div，然后给一个id属性即可。

3、这里是使用宽度的百分比之后，设置高度值为零，然后使用padding属性的top或者bottom的值（可以是任意百分比），背景颜色作为测试。

4、然后在浏览器运行之后的效果是这样的哦，放大缩小浏览器，宽高会随之改变。

5、这个方法是使用expression来设置高度即可。

网页里面的宽度是可以用百分比决定的，可以设置这个容器的宽度占屏幕宽度的百分之多少，但是因为百分比的宽度是要有参考对象的，所以在设置百分比的宽度时，要先设置body的宽度为100%。

照你的要求：一屏分为两栏显示，那么用两个DIV来做，一个DIV的宽度就是50%，两个在一起就正好100%了，如果你想这两个DIV之间有间距，那么就设置宽度为48%就行，具体自己把握，然后设置左边的DIV左浮动，右边的DIV右浮动即可。

高度是可以设置固定像素的，比如一个div的宽度为48%，高度为50px都行的，可以混用，只要记住使用百分比定义宽高长度就要设置对应的body的宽高为100%就行了

一、用背景图填充法

这里是给父DIV设置了背景图片填充，所有DIV都不设高度。

HTML代码：

1<div class="endArea">

2<div class="col1">第一列　左边正文</div>

3<div class="col3">第二列　右边<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />字字</div>

4<div class="col2">第三列　中间图片</div>

5<div class="clear"></div>

6</div>

CSS代码：

1.endArea{margin:0 autowidth:960pxbackground:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif)clear:both}

2.endArea .col1{float:leftwidth:573px}

3.endArea .col2{float:leftwidth:25px}

4.endArea .col3{float:rightwidth:362px}

二、DIV的加单介绍：

DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。

DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。

---