嵌套div高度自适应解决方案



嵌套div高度自适应解决方案。

div嵌套的时候,外层的div的高度自适应的问题,当然这在IE下是没问题的,主要是firefox下的问题。如下图所示:

1、在IE和FF中的效果 IEff下图片效果

2、IE代码:

无格式查看复制到剪贴板打印代码?
  1. <style type=”text/css”>
  2. #box
  3. background-color:#0cf;
  4. width:100%; border:1px #00f solid;
  5. #left
  6. background-color:#fc0;
  7. border:1px #f30 solid
  8. float:left
  9. width: 200px;
  10. #right
  11. background-color:#9c9;
  12. border:1px #090 solid
  13. float:right
  14. width: 300px;
  15. </style> 
  16. <div id=”box”>
  17. <div id=”left”>
  18. 1111111111<br /> 
  19. 2222222222222<br /> 
  20. 333333333333333333333<br />
  21. 4444444<br /> 
  22. 555555555555<br /> 
  23. 666666666666666<br /> 
  24. 777777777777777777</div> 
  25. <div id=”right”>
  26. 1111111111<br /> 
  27. 22222222222222222222222<br />
  28. 333333333333333333333<br />
  29. 444444444444444<br /> 
  30. 555555555555555555555555555555</div>
  31. </div>
<style type="text/css"> #box { background-color:#0cf; width:100%; border:1px #00f solid; } #left { background-color:#fc0; border:1px #f30 solid; float:left; width: 200px; } #right { background-color:#9c9; border:1px #090 solid; float:right; width: 300px; } </style> <div id="box"> <div id="left"> 1111111111<br /> 2222222222222<br /> 333333333333333333333<br /> 4444444<br /> 555555555555<br /> 666666666666666<br /> 777777777777777777</div> <div id="right"> 1111111111<br /> 22222222222222222222222<br /> 333333333333333333333<br /> 444444444444444<br /> 555555555555555555555555555555</div> </div>

其实很简单,只需给外层div加个overflow:auto;即可。

  1. <style type=”text/css”>
  2. #box
  3. background-color:#0cf;
  4. width:100%; border:1px #00f solid; overflow:auto
  5. #left
  6. background-color:#fc0;
  7. border:1px #f30 solid
  8. float:left
  9. width: 200px;
  10. #right
  11. background-color:#9c9;
  12. border:1px #090 solid
  13. float:right
  14. width: 300px;
  15. </style> 
  16. <div id=”box”>
  17. <div id=”left”>
  18. 1111111111<br /> 
  19. 2222222222222<br /> 
  20. 333333333333333333333<br />
  21. 4444444<br /> 
  22. 555555555555<br /> 
  23. 666666666666666<br /> 
  24. 777777777777777777</div> 
  25. <div id=”right”>
  26. 1111111111<br /> 
  27. 22222222222222222222222<br />
  28. 333333333333333333333<br />
  29. 444444444444444<br /> 
  30. 555555555555555555555555555555</div>
  31. </div>
  32. http://blog.sina.com.cn/s/blog_56c219ad0100jdh5.html