今天在对我的另个博客（梓悦平安 http://b.pxsky.net）修改主题，需要用到div高度自适应判断的问题，来给左右边框的中间div自动判断高度加虚线，由此发现一些有意思的不同效果，现在分享给大家，希望对大家有些帮助。
一、高度的自适应（父div高度随子div的高度改变而改变）
1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。
代码：
<style type="text/css">
#aa{border:#000000 solid 5px;}
#bb{border:#00ffff solid 5px;}
#cc{border:#0033CC solid 5px;}
</style>
<div id="aa">父div
<div id="bb">子div</div>
<div id="cc">子div</div>
</div>
效果：IE、谷歌浏览器下一致，如下图：
2、如果父div定义height,子div均为标准流的时候，在IE下父div的height随内容变化而变化，谷歌浏览器中则固定大小，如父div设置height:50px。
代码：
<style type="text/css">
#aa{ border:#000000 solid 5px;height:50px;}
#bb{border:#00ffff solid 5px;}
#cc{ border:#0033CC solid 5px;}
</style>
<div id="aa">父div
<div id="bb">子div</div>
<div id="cc">子div</div>
</div>
IE浏览器下效果：
谷歌浏览器下效果：
3、如果子div使用了float属性，此时已经脱离标准流，父div不会随内容的高度变化而变化，解决的办法是在浮动的div下面，加一个空div，设置clear属性both。或者在父div里设置overflow属性为hidden。
未加clear:both属性的代码：
<style type="text/css">
#aa{ border:#000000 solid 5px;}
#bb{border:#00ffff solid 5px;float:left;}
#cc{ border:#0033CC solid 5px;float:left;}
</style>
<div id="aa">父div
<div id="bb">子div</div>
<div id="cc">子div</div>
</div>
IE浏览器下效果：
谷歌浏览器下效果：
加clear:both属性修改后的代码：
<style type="text/css">
#aa{ border:#000000 solid 5px;}
#bb{border:#00ffff solid 5px;float:left;}
#cc{ border:#0033CC solid 5px;float:left;}
</style>
<div id="aa">父div
<div id="bb">子div</div>
<div id="cc">子div</div>
<div style="clear:both"></div>
</div>
修改后效果：IE、谷歌浏览器下一致，如下图：
**4、另类的高度自适应
原理：padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。此方法必须加文档信息才能正常显示。**
代码：
<!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";> <style type="text/css"> #aa{ border:#000000 solid 5px;overflow:hidden;} #bb{border:#00ffff solid 5px;float:left; padding-bottom:100000px;margin-bottom:-100000px; } #cc{ border:#0033CC solid 5px;float:left;padding-bottom:100000px;margin-bottom:-100000px;} #dd{float:left} </style> <div id="aa"> <div id="bb">子div</div> <div id="cc">子div</div> <div id="dd">子div
</div> </div>
效果：
二、高度的自适应（子div高度随父亲div高度改变而改变）
在有边框的情况下，你会发现同一个div,在ie下的高度和在谷歌浏览器下的高度是不一样的，比如你设置了高度为100px的div，边框是border:5px;IE的高度是5+5+空白区域=100px，而谷歌浏览器下高度是100px的div是不包括高度的，只是空白区域的高度。
IE浏览器下效果：
谷歌浏览器下效果：
黑框的上方是对齐的，但是设置了同样的高度，效果却不一样，代码如下：
<style type="text/css">
#aa{ border:#000000 solid 5px;height:100px;}
#bb{border:#00ffff solid 5px;float:left; height:100%}
#cc{ border:#0033CC solid 5px;float:left}
</style>
<div id="aa">
<div id="bb">子div</div>
<div id="cc">子div</div>
</div>
如果没有设置边框，完全没有高度不一致的情况，子div适应父div很简单，如上面代码，只是在子div加了height:100%属性即可。有一点要注意，如果父div是body的话，也就是说一个body套了一个div，让div适合body的大小的，必须设置body的高度才能实现子div随body改变而改变，body{height:100%}。
三、利用js脚本自动获取高度，从而赋予此div高度值
<div style="border:#000000 solid 5px;overflow: hidden;height:300px;">
<div style="border:#00ffff solid 5px;background:#C36; width:100px; float:left;" id="left">子div</div>
<div style="border:#0033CC solid 5px;background:#0C9; width:200px; float:left;" id="right">今天在对我的另个博客（梓悦平安 http://b.pxsky.net）修改主题，需要用到div高度自适应判断的问题，来给左右边框的中间div自动判断高度加虚线，由此发现一些有意思的不同效果，现在分享给大家，希望对大家有些帮助。
</div>
</div>
<script type="text/javascript">
window.onload = function() {
document.getElementById("left").style.height=document.getElementById("right").offsetHeight + "px";
}
</script>
通过以上代码可以实现“子div”的高度通过js获取另个子div段落的高度，同时赋值给第一个子div，以此保持两个子div的高度一致。
效果如下：
注意：以上为IE浏览器效果，谷歌浏览器下效果会忽略边框高度，如本文二中所说的。
好系统！平时弄没系统学，都是尝试出来的，弄不出来就搜索。
呵呵，我比你还烂啊，我也是不会了百度搜索的，慢慢学习的，还需要向你科班的学习才是啊。
站长你好，恒创科技买主机送平板，礼品有限，学生购买---9折加20%返现！！
正常评论来了个第三方
不好意思，这都是评论过滤插件的问题，搞不懂有时可能就出问题。
很不错的兼容性问题！
感谢来访哈，已送IP
写的不错，加油哦
圣诞节到了，圣诞节祝福短信 http://www.psdqw.com/jieri/shengdanjie/ 希望对你有用
同乐同乐，感谢来访哈，已送IP