css左侧导航和内容高度一致

<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;
 }