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


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

  

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

  

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM