如何让2个并列的div自动等高（不设高度）

如何让2个并列的div自动等高（不设高度）

1， table：

css:

 *{margin: 0; padding: 0;}

td{}

table{ 100%; height: 100%}

html:

    <table border="1">

    <tr><td colspan="2" style="height:50px; background:#333"></td></tr>

    <tr><td style=" 50px; background:#333"></td><td></td></tr>

</table>

2， 绝对定位定高法：

<style type="text/css">

body{ margin:0; height:100%}

html{ height:100%}

#left{ position:absolute; top:0; left:0; 200px; height:100%; background-color:#CCCCCC}

#right{ margin-left:200px; height:100%; background-color:#0099FF}

</style>

<div class="" style="top:0;"></div>

<div id="left">left</div>

<div id="right">right</div>

3， 内外补丁法

* { margin:0; padding:0; }

#wrap {

overflow:hidden;/*// (这行代码是重点，否则你会看到页面很长很长)*/

padding:0;

padding-left:180px;/*（内补丁）*/

}

#left,#right {

height:auto;

margin-bottom:-10000px;/*（外补丁）*/

padding-bottom:10000px;/*（内补丁）*/

}

#left {

display:inline;

float:left;

180px;

margin-left:-180px;/*（外补丁）*/

background: #0CF;

}

#right{

float:right;

100%;

background: #FC6;

}

<div id="wrap">

    <div id="left">11111<br>111<br>11111<br>1111111<br><br></div>

    <div id="right"></div>

</div>