VUE页面实现左右等高不同背景色布局问题求助

问题根源 #

原有代码无法实现等高的核心原因：

• height: 100% 生效需要父元素有明确的高度定义，外层容器.a未设置高度，因此左右盒子的高度声明不生效
• 浮动元素脱离文档流，父容器无法感知浮动子元素的高度，两个盒子高度仅由自身内容决定，自然无法保持一致

可用实现方案（符合你的要求，无渐变、无伪元素） #

使用Flex布局实现，是目前最简便的等高布局方案，修改后的完整代码如下：

<template>
  <div class="a">
    <div class="b">
      <div class="v1">
        <img src="../assets/v.png"/>
      </div>
      <div class="v2">
          <img src="../assets/v.png"/>
      </div>
      <div class="v3">
          <img src="../assets/v.png"/>
      </div>
      <div class="v4">
          <img src="../assets/v.png"/>              
      </div>
    </div>

    <div class="c">
      <div class="v5">
        <img src="../assets/v.png"/>  
      </div>
      <div class="v6">
        <img src="../assets/v.png"/> 
      </div>
    </div>
  </div>
</template>

<style>
/* 如果你需要让布局撑满整个浏览器窗口高度，可以打开下面的注释
html,body {
  height: 100%;
  margin: 0;
}
*/
.a{
  margin: 0;
  /* 核心：设置为flex容器 */
  display: flex;
}
.b{
  background-color: antiquewhite;
  width: 30%;
}
.c{
  background-color:red;
  width: 70%;
}
</style>

实现说明 #

• Flex容器的直接子元素默认开启align-items: stretch属性，会自动拉伸高度，和高度更高的子元素保持一致，天然实现等高效果
• 无需设置浮动、定位，也不需要额外的伪元素或渐变背景，完全符合你的需求
• 若需要让左右盒子撑满整个视口高度，仅需给html、body、外层容器.a都设置height: 100%即可

内容的提问来源于stack exchange，提问作者Aisling