DIV高度自适应及应该注意的问题

1、页眉内容 DIV 高度自适应及应该注意的问题 (1) DIV 高度自适应及注意问题 积累了一些经验， 总结出一些关于 div 高度自适应的技巧， 希望有助于大家， 转载请标 明出处，谢谢。 一、 DIV 高度自适应(父 div 高度随子 div 的高度改变而改变) 1、如果父 div 不定义 height 、子 div 均为标准流的时候，父 div 的 height 随内容的 变化而变化 , 实现父 div 高度随子 div 的高度改变而改变。 代码： 1. 2. #aaborder:#000000solid5px 3. #bbborder:#00ffffsolid5px; 4. #ccbor

2、der:#0033CCsolid5px 5. /style 6. 父 div 7. 子 div /div 8. 子 div /div 9. /div 效果： IE、FF 下一致 2、如果父 div 定义 height, 子 div 均为标准流的时候，在 IE 下父 div 的 height 随内 容变化而变化， ff 中则固定大小，如父 div 设置 height:50px 代码： 10. 11. #aaborder:#000000solid5px;height:50px 12. #bbborder:#00ffffsolid5px; 13. #ccborder:#0033CCsolid5px

3、14. /style 15. 父 div 16. 子 div /div 17. 子 div /div 18. /div IE 效果 1 页脚内容 页眉内容 FF下效果 3、如果子 div 使用了 float 属性，此时已经脱离标准流， 化而变化，解决的办法是在浮动的 div 下面，加一个空 div ， 未加空 div 代码： 19. 20. #aaborder:#000000solid5px; 21. #bbborder:#00ffffsolid5px;float:left 22. #ccborder:#0033CCsolid5px;float:left 23. /style 24. 父 di

4、v 25. 子 div /div 26. 子 div /div 27. /div IE 效果： FF效果： 修改后代码： 28. 29. #aaborder:#000000solid5px; 30. #bbborder:#00ffffsolid5px;float:left 31. #ccborder:#0033CCsolid5px;float:left 32. /style 33. 父 div 34. 子 div /div 35. 子 div /div 36. /div 37. /div 修改后效果： IEFF 一致 4. 另类的 DIV 高度自适应 原理: padding-bottom 将列

5、拉长变的一样高， 而负的 margin-bottom 同时，溢出部分隐藏掉了。此方法必须加文档信息才能正常显示 代码： div 不会随内容的高度变 设置 clear 属性 both 又使其回到底部开始的位置， 38. /xhtml1/DTD/xhtml1-transitional.dtd 2 页脚内容 页眉内容 39. 40. 41. #aaborder:#000000solid5px;overflow:hidden; 42. #bbborder:#00ffffsolid5px;float:left; 43. padding-bottom:100000px;margin-bottom:-100

6、000px; 44. #ccborder:#0033CCsolid5px;float:left; 45. padding-bottom:100000px;margin-bottom:-100000px; 46. #ddfloat:left 47. /style 48. 49. 子 div /div 50. 子 div /div 51. 子 div /div 52. /div 效果： 二、 DIV 高度自适应（子 div 高度随父亲 div 高度改变而改变） 在有边框的情况下， 你会发现同一个 div, 在 IE 下的高度和在 FF 下的高度是不一样的， 比如你设置了高度为 100px 的 di

7、v ，边框是 border:5px;IE 的高度是 5+5+空白区域 =100px ， 而 FF 下高度是 100px 的 div 是不包括高度的，只是空白区域的高度，如下图黑框的部分 : 黑框的上方是对齐的，但是设置了同样的高度，效果却不一样，代码如下： 1. 2. #aaborder:#000000solid5px;height:100px; 3. #bbborder:#00ffffsolid5px;float:left;height:100% 4. #ccborder:#0033CCsolid5px;float:left 5. /style 6. 7. 子 div /div 8. 子 div /div 9. /div 如果没有设置边框，完全没有高度不一致的情况，子 div 适应父 div 很简单，如上面 代码， 只是在子 div 加了 height:100% 属性即可。 如果设置了边框， 可以把子 div 的高度设 置为比父 div 小上下边框高度的值， 比如在此例中， 可把 #bb 中 height 改为 100-5-5 90px ， 结果在 IE 和 Mozilla 中显示一致。 3 页脚内容 页眉内容 有一点