第一种：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><head><title>蚂蚁部落</title><style type="text/css"> .mytest { width:100px; height:100px; border:1px solid green; }</style></head><body> <div class="mytest">据英国《每日电讯报》11月30日报道，以色列安全内阁当天批准在约旦河西岸和东耶路撒冷犹太人定居点新建3000套住房，此举旨在抗议联合国29日批准给与巴勒斯坦观察员国地位。巴以和谈进程也因此蒙上巨大</div></body></html> 以上代码中固定了div的高度为100px，如果内容的高度超过100px的话，除了在IE6下能够达到高度自适应，其他浏览器都会出现内容溢出的现象，显示不能够达到我们想要的效果，
第二种：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><head><title>蚂蚁部落</title><style type="text/css"> .mytest { width:100px; height:auto!important; height:100px; min-height:100px; border:1px solid green; }</style></head><body> <div class="mytest">据英国《每日电讯报》11月30日报道，以色列安全内阁当天批准在约旦河西岸和东耶路撒冷犹太人定居点新建3000套住房，此举旨在抗议联合国29日批准给与巴勒斯坦观察员国地位。巴以和谈进程也因此蒙上巨大阴</div></body></html> 以上代码通过运用 和 属性实现了各个浏览器都能够达到高度自适应效果。
上面都是介绍的是div中都是文本内容的情况，但是还有可能是div中存有子div的情况，下面简单介绍一下此种情况。先看一实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title>蚂蚁部落</title> <style type="text/css"> .parent { border:2px solid red; width:200px; } .children { width:200px; height:200px; background-color:green; } </style> </head> <body> <div class="parent"> <div class="children"></div> </div> </body> </html> 以上代码中，父元素只规定了宽度没有规定高度，子元素在正常的文档流中，所以子元素能够将父元素撑开。
再看下面这一实例:从上面代码的运行可以看出，父元素并没有被撑开，这个是因为子元素属性值设置为left，从而脱离了文档流。如果想让上面的父元素达到高度自适应，就要清除子元素的浮动。修改代码如下:
以上代码通过给父元素的样式中添加overflow:hidden即可。
如果说父元素就像最开始的例子一样，固定了高度，并且还要实现高度自适应效果，就可以参阅元素中内容是文本的情况，解决方法是一样的。代码如下: