bootstrap列等高问题

Question

是这样的，我最近正在学习bootstrap，想模仿一下intel官网练练手。但是有一个部分自己不知道怎么解决了，就是下面的部分。。

我写的代码结构类似这样 在线demo

问题就是如何将左右两部分的高度保持一致，即demo中的红色部分如何与左边的图片高度保持一致？要是高度写成定值的话就无法做到响应式了

Answer 1

<div id="container">
  <div id="left">
    LEFT
  </div>
  <div id="right">
    <div id="up">
      UP
    </div>
    <div id="down">
      DOWN
    </div>
  </div>
</div>

css

div {
  border: red solid 1px;
  box-sizing: border-box;
}

#container {
  position: relative;
}

#left {
  height: 350px;
  width: 50%;
}

#right {
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

#up, #down {
  height: 50%;
}

https://jsfiddle.net/hsfzxjy/...

修改 #left 高度为任意值，该结构依然成立，也就有了所谓的自适应高度

Answer 2

可以使用flex布局解决，flex布局可以使item有一致的高度

Answer 3

我就直接说我思路，首先你干脆用个大盒子包含这两块内容，然后这个大盒子的高度由图片的高度来撑起来，这样你只需要将右边的盒子的高度设为百分百了。简单明了。