css 左侧高度 跟随右侧内容高度 自适应

Posted 24k纯帅强哥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
}

 

以上是关于css 左侧高度 跟随右侧内容高度 自适应的主要内容,如果未能解决你的问题,请参考以下文章

如何实现内部div的高度自适应外部的div

iOS tableView跟随内容高度自适应变化

真正解决iframe高度自适应问题

第八课《复杂页面实现》

css能不能实现左边div固定宽度,右边div自适应撑满剩下的宽度

如何强制左侧 <td> 内的图像高度自动跟随右侧 <td> 的高度?