1、position
給父元素設置position:relative,左邊的子元素設置position:absulote,且左邊元素的高度為100%。CSS代碼如下:
/*position*/
.left{
height: 100%;
width: 100px;
background: aqua;
position: absolute;
}
.right{
width: 300px;
margin-left: 110px;
background: antiquewhite;
}
.parent{
position: relative;
}
2、margin負值
這種方法的原理其實是把子元素的實際高度撐開的很多,父元素overflow:hidden起到一個遮罩作用,來保持左右兩側元素高度相等的。css代碼如下
/*margin負值*/
.parent{
overflow: hidden;
}
.left,.right{
margin-bottom: -5000px;
padding-bottom: 5000px;
}
.left{
float: left;
background: aqua;
}
.right{
float: right;
background: antiquewhite;
}
3、flex布局
flex布局的中align-items的stretch屬性可以讓內部元素高度鋪滿。CSS代碼如下:
/*flex布局*/
.parent{
display: flex;
display: -webkit-flex;
display: -o-flex;
display: -moz-flex;
display: -ms-flex;
align-items: stretch;
}
.left{
background: aqua;
}
.right{
margin-left: 110px;
background: antiquewhite;
}
