css 左側跟隨右側高度自適應

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

　　

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

　　

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

　　

本文摘自：https://www.jianshu.com/p/8dc3c4976140