set a div's min height depending on a height of another div

<div id="container">
  <div id="div1">
  </div>
  <div id="div2">
  </div>
</div>

.given the example above, how do I set the height开发者_开发技巧 of div2 as the minimum height of div1? also vice versa by using only css. TIA!

You cant do that using css... not dynamically.

#div1 + #div2 {} will let you target div2 occuring only after div1 but you cant make the height relate to the previous element, you just have to hard code it.

#div1 {min-height: 100px;}
#div1 + #div2 { height: 100px;}

.I figure out another way around it, but not actually by inheriting the size of each other. I decided to create a background image matching the background colors of both divs and then applying it to the container div.

add the same class on both div1 and div2 then set the min height of the class added

<style>
        .SomeClass{
          height:500px;
          min-height: 300px}
   </style>

 <div id="container">
     <div id="div1" class="SomeClass">
  </div>
  <div id="div2"  class="SomeClass">
  </div>
</div>