怎样让一个div高度自适应浏览器高度

这个方法就大致分为两种吧，

第一种，用CSS的方法

第二种，用JS方法

这里暂时只演示第一种，如果第二种，另外@我

示例代码如下：

CSS代码第一种写法

html,body{height:100%margin:0}/**把HTML和BODY的高度设置成100%**/

div{height:100%background-color:#ccc}/**把你DIV的高度设置成100%**/

CSS代码第二种写法

div{height:100%position:absolutewidth:100%background-color:#cccleft:0top:0}

这里用到position:absolute 所以HTML和BODY不需要设置100%

用CSS中的min-height就可以了。

把div的高度设置成min-height:200px

当有超过200的内容填充div的时候,高度就会自动变化

.div{min-height:200px}

当然还有一个就是height：aout 这属性是高度自适应。

在最后一个div 后面加上 overflow:hidden如下：

<div style="width:580pxheight:automargin:0 auto

<div style="height:100pxwidth:230pxfloat:leftmargin:20px"></div>

<div style="height:100pxwidth:230pxfloat:leftmargin:20px"></div>

<div style="height:100pxwidth:230pxfloat:leftmargin:20px"></div>

<div style="clear:bothheight:1pxwidth:100%overflow:hiddenmargin-top:-1px"></div>

</div>

扩展资料

DIV height与DIV自适应高度

1、在div标签内使用style属性即可设置此DIV盒子高度样式。

<div style="height:50px">我高度为50px</div>

解释：以上通过div标签的style属性样式设置height高度样式。

2、外部样式设置指定div盒子高度

此方法是常用的标签外部CSS样式设置对象样式法。可以通过将CSS代码写入CSS文件，再通过HTML引入CSS文件即可使用；也可以直接在HTML源代码内使用style标签设置CSS样式代码。

这里为大家演示html网页源代码内使用style标签设置外部CSS样式。

为了观察效果本div高度height实例，对象div命名为“.divcss5”，宽度为150px，height为80px，css边框为1px蓝色

DIV+CSS小例CSS代码：

<style>

.divcss5{ height:80px width:150px border:1px solid #00F}

</style>

---