嵌套div高度自适应解决方案。
div嵌套的时候,外层的div的高度自适应的问题,当然这在IE下是没问题的,主要是firefox下的问题。如下图所示:
1、在IE和FF中的效果
2、IE代码:
无格式查看复制到剪贴板打印代码?
- <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
/> - 555555555555555555555555
555555</div> - </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;即可。
- <style
type=”text/css”> - #box
{ background-color:#0cf; width:100%; border:1px #00f solid; overflow:auto; - }
- #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
/> - 555555555555555555555555
555555</div> - </div>
- http://blog.sina.com.cn/s/blog_56c219ad0100jdh5.html