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

1，flex布局

flex布局的中align-items的stretch屬性可以讓內部元素高度鋪滿。CSS代碼如下：

/*flex布局*/
  .parent{
     display: flex;
     justify-content: space-between;
     align-items: stretch;
   }
   .left{
     background: red;
   }
   .right{
     margin-left: 110px;
     background: blue;
   }

 2.position

給父元素設置position:relative，左邊的子元素設置position:absulote，且左邊元素的高度為100%。CSS代碼如下：

 

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

 

3、margin負值

這種方法的原理其實是把子元素的實際高度撐開的很多，父元素overflow：hidden起到一個遮罩作用，來保持左右兩側元素高度相等的。css代碼如下

/*margin負值*/
.parent{
  overflow: hidden;
}
.left,.right{
  margin-bottom: -5000px;
  padding-bottom: 5000px;
}
.left{
  float: left;
  background: red;
}
.right{
  float: right;
  background: blue;
}