div嵌套的时候,外层的div的高度自适应的问题,当然这在IE下是没问题的,主要是firefox下的问题。如下图所示:
<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 />
555555555555555555555555555555</div>
</div>