等高布局

1、 使用数值非常大正padding-bottom与负margin-bottom

---

//html

    

    



//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

    

    



//css
#container{
    display:flex;
}
#left{
    width:30%;
    background-color:aqua;
}
#right{
  width:70%;
  background-color:yellow;
  height:400px; 
}

flex的align-items属性默认值为strech，也就是高度默认填满父容器高度。而父容器高度是最高的子元素的高度。因此最终的结果就是等高

3、使用定位

---

//html

    

    



//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;使得所有子元素的高度都和父元素的高度相同，实现等高效果