左右盒子实现高度自适应

左右盒子实现高度自适应

初始结构

网页结构如下：（实现两个盒子高度自适应必须要有一个父盒子包裹）

<div class="all">
    <div class="left"></div>
    <div class="right"></div>
  </div>

css结构如下：

.left {
  width: 15%;
  background-color: rgb(101, 165, 250);
  float: left;
  height: 200px;
}
.right {
  float: left;
  width: 30%;
  height: 500px;
  background-color: lightcoral;
}

效果如下：

左右高度自适应

给左右盒子分别添加margin-bottom（负数值）、padding-bottom（正数值），给父盒子添加一个overflow：hidden

.all {
  overflow: hidden;
}
.left {
  width: 15%;
  background-color: rgb(101, 165, 250);
  float: left;
  height: 200px;
  margin-bottom: -10000px;
  padding-bottom: 10000px;
}
.right {
  float: left;
  width: 30%;
  height: 500px;
  background-color: lightcoral;
  margin-bottom: -10000px;
  padding-bottom: 10000px;
}

最终效果如下：