Follow left right highly adaptive css

1、position

To a parent element set position: relative, left child element set position: height absulote, and left elements is 100%. CSS code is as follows:

/*position*/
.left{
  height: 100%;
  width: 100px;
  background: aqua;
  position: absolute;
}
.right{
  width: 300px;
  margin-left: 110px;
  background: antiquewhite;
}
.parent{
  position: relative;
}

　　

2, margin negative

The principle of this method is in fact the actual height of the sub-elements of a lot of distraction, the parent element overflow: hidden to play the role of a mask to keep the left and right elements equal height. css code as follows

 /*margin负值*/
.parent{
  overflow: hidden;
}
.left,.right{
  margin-bottom: -5000px;
  padding-bottom: 5000px;
}
.left{
  float: left;
  background: aqua;
}
.right{
  float: right;
  background: antiquewhite;
}

　　

3, flex layout

Align-items in the stretch property allows the internal layout of the flex element height covered. CSS code is as follows:

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

　　

This article is taken: https://www.jianshu.com/p/8dc3c4976140