1、 使用数值非常大正padding-bottom与负margin-bottom
//html
<div id = "container">
<div id="left"></div>
<div id = "right"></div>
</div>
//css
*{
margin:0;
padding:0;
}
#container{
overflow:hidden;
}
#left{
width:30%;
background-color:aqua;
height:300px;
float:left;
padding-bottom:9999px;
margin-bottom:-9999px;
}
#right{
width:70%;
background-color:yellow;
height:400px;
float:left;
padding-bottom:9999px;
margin-bottom:-9999px;
}
首先，两列都是左浮动，且都设置了一个高度
其次，为两列均设置padding-bottom:9999px; margin-bottom:-9999px;，padding-bottom使得无限向下填充两列的背景色，margin-bottom则用于抵消这部分正值
最后，父容器设置为overflow:hidden，使得父容器的高度就是两列中最高的那一列的高度，而短的那一列不足的部分被padding-bottom所补充了。
2、使用flex
//html
<div id = "container">
<div id="left"></div>
<div id = "right"></div>
</div>
//css
#container{
display:flex;
}
#left{
width:30%;
background-color:aqua;
}
#right{
width:70%;
background-color:yellow;
height:400px;
}
flex的align-items属性默认值为strech，也就是高度默认填满父容器高度。而父容器高度是最高的子元素的高度。因此最终的结果就是等高
3、使用定位
//html
<div id = "container">
<div id="left"></div>
<div id = "right"></div>
</div>
//css
#container{
position: relative;
height : 400px;
}
#left{
width:30%;
background-color:aqua;
position: absolute;
top : 0;//关键
bottom: 0;//关键
}
#right{
width:70%;
background-color:yellow;
position: absolute;
top : 0;//关键
bottom: 0;//关键
left : 30%;
}
设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同，实现等高效果
