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>