考虑以下结构的html布局，实现如题所述的右侧高度自适应，左侧高度与右侧保持一致,如图所示的效果。
image.png
<div class="parent">
<div class="left"> left </div>
<div class="right">
<br/>
<br/>
<br/>
<br/>
ddddddddddddddddddddddd
</div>
</div>
1、position
给父元素设置position:relative，左边的子元素设置position:absulote，且左边元素的高度为100%。CSS代码如下：
div{
border: 1px solid black;
}
/*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;
}
