如何使用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的高度是自动,所以它不会帮助.这是我的小提琴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
• 不要放花车.

Answer 2

通过指定我们可以实现的位置,

.div1 {
  width:300px;
  height: auto;
  background-color: grey;  
  border:1px solid;
  position:relative;
  overflow:auto;
}
.div2 {
  width:150px;
  height:auto;
  background-color: #F4A460;  
  float:left;
}
.div3 {
  width:150px;
  height:100%;
  position:absolute;
  right:0px;
  background-color: #FFFFE0;  
  float:right;
}

但是使用float不可能实现这一点.