如何根据另一个div使用css动态地改变一个div的高度？ [英] how to change the height of a div dynamically based on another div using css?

问题描述

这是我的代码

HTML：

  div class =div1> 
< div class =div2> 
 Div2会开始< br />< br />< br />< br />< br />< br />< br / Div2 ends 
< / div> 
< div class =div3> 
 Div3 
< / div> 
< / div> 
  

CSS：

 code> .div1 {
 width：300px; 
 height：auto; 
 background-color：gray; 
 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的高度为500像素，那么div3的高度应为500像素。我知道我可以使用继承，但事情是div1的高度是汽车所以它不会帮助。这里是我的小提琴 http://jsfiddle.net/prashusuri/E4Zgj/1/ 如何

解决方案

 <$> c $ c>＃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


• 不要放置浮动广告。

here is my code

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;
}

i want to increase the height of div3 dynamically.

for example if the height of div1 is 500px then the height of div3 should be 500px. i know i can use inherit, but the thing is height of div1 is auto so it wont help. here is my fiddle http://jsfiddle.net/prashusuri/E4Zgj/1/ how to do this?

thanks

解决方案

#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;
}

• The container must have display:table
• The boxes inside container must be: display:table-cell
• Don't put floats.

这篇关于如何根据另一个div使用css动态地改变一个div的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！