1簿透、 使用數(shù)值非常大正padding-bottom與負(fù)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;
}
首先，兩列都是左浮動(dòng)菱属，且都設(shè)置了一個(gè)高度
其次引瀑，為兩列均設(shè)置padding-bottom:9999px; margin-bottom:-9999px;，padding-bottom使得無限向下填充兩列的背景色州藕，margin-bottom則用于抵消這部分正值
最后束世，父容器設(shè)置為overflow:hidden，使得父容器的高度就是兩列中最高的那一列的高度床玻，而短的那一列不足的部分被padding-bottom所補(bǔ)充了毁涉。
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屬性默認(rèn)值為strech锈死，也就是高度默認(rèn)填滿父容器高度贫堰。而父容器高度是最高的子元素的高度。因此最終的結(jié)果就是等高
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;//關(guān)鍵
bottom: 0;//關(guān)鍵
}
#right{
width:70%;
background-color:yellow;
position: absolute;
top : 0;//關(guān)鍵
bottom: 0;//關(guān)鍵
left : 30%;
}
設(shè)置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同其屏，實(shí)現(xiàn)等高效果
