百度空间 | 百度首页 
 
查看文章
  
嵌套div高度自适应
2008-07-24 16:22

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. }  
  11. #right {  
  12.     background-color:#9c9;   
  13.     border:1px #090 solid;  
  14.     float:right;  
  15.     width: 300px;  
  16. }  
  17. </style>  
  18.   
  19. <div id="box">  
  20. <div id="left">  
  21. 1111111111<br />  
  22. 2222222222222<br />  
  23. 333333333333333333333<br />  
  24. 4444444<br />  
  25. 555555555555<br />  
  26. 666666666666666<br />  
  27. 777777777777777777</div>  
  28. <div id="right">  
  29. 1111111111<br />  
  30. 22222222222222222222222<br />  
  31. 333333333333333333333<br />  
  32. 444444444444444<br />  
  33. 555555555555555555555555555555</div>  
  34. </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. }  
  6. #left {  
  7.     background-color:#fc0;   
  8.     border:1px #f30 solid;  
  9.     float:left;  
  10.     width: 200px;  
  11. }  
  12. #right {  
  13.     background-color:#9c9;   
  14.     border:1px #090 solid;  
  15.     float:right;  
  16.     width: 300px;  
  17. }  
  18. </style>  
  19.   
  20. <div id="box">  
  21. <div id="left">  
  22. 1111111111<br />  
  23. 2222222222222<br />  
  24. 333333333333333333333<br />  
  25. 4444444<br />  
  26. 555555555555<br />  
  27. 666666666666666<br />  
  28. 777777777777777777</div>  
  29. <div id="right">  
  30. 1111111111<br />  
  31. 22222222222222222222222<br />  
  32. 333333333333333333333<br />  
  33. 444444444444444<br />  
  34. 555555555555555555555555555555</div>  
  35. </div>  

本文链接: http://www.52web.com/52article/?view-107.html 结束标记


类别：div/css | 添加到搜藏 | 浏览() | 评论 (1)
 
最近读者：
 
网友评论：
1
2008-07-25 11:18 | 回复
div还真不错。。
 
发表评论：
姓　名：
网址或邮箱： (选填)
内　容：
验证码： 请点击后输入四位验证码，字母不区分大小写
      

     

©2009 Baidu