html - 如何使用CSS根据另一个div动态更改div的高度？

Question

这是我的代码。

HTML:

<div class="div1">
  <div class="div2">
    Div2 starts <br /><br /><br /><br /><br /><br /><br /> Div2 ends
  </div>
  <div class="div3">
    Div3
  </div>
</div> 

CSS:

.div1 {
  width: 300px;
  height: auto;
  background-color: grey;
  border: 1px solid;
  overflow: auto;
}

.div2 {
  width: 150px;
  height: auto;
  background-color: #F4A460;
  float: left;
}

.div3 {
  width: 150px;
  height: auto;
  background-color: #FFFFE0;
  float: right;
}

我想动态增加div3的高度。

例如，如果div1 的高度是500px 那么div3 的高度应该是500px。我知道，我可以使用继承，但是 div1 的高度是 auto，所以它没有帮助。

这是我的 fiddle http://jsfiddle.net/prashusuri/E4Zgj/1/

如何做到这一点？

Answer 1

#container-of-boxes {
    display: table;
    width: 1158px;
}
#box-1 {
    width: 578px;
}
#box-2 {
    width: 386px;
}
#box-3 {
    width: 194px;
}
#box-1, #box-2, #box-3 {
    min-height: 210px;
    padding-bottom: 20px;
    display: table-cell;
    height: auto;
    overflow: hidden;
}

• 容器必须有display:table
• 容器内的框必须是:display:table-cell
• 不要放 float 。