Question

Here is my HTML structure:

<li>
     <div class='wrapper'>
          <div class='controller'> ... </div>
          <div class='preview'> ... </div>
     </div>
</li>

The content in the ‘controller’ and ‘preview’ divs can vary, and thus so can the height of the content. There isn’t necessary a correlation between the heights of the ‘controller’ and ‘preview’ divs. In a given wrapper one might be 10px high while the other one is 100px high. I want the smaller one to expand to match the height of the smaller one. Using a css rule of “height: 100%;” doesn’t work because there’s no explicit height set to the wrapper, and again i can’t set a height to the wrapper, because the content inside of it can vary.

I am looking for a solution in css not javascript. My company has a strict policy of writing for browsers that don’t have javascript enabled.

Answer 1

Using 100% height for a div will only take up as much as the content of the div needs. You will have
to explicitly set the height.

You can do this by using some javascript:

var height = document.getElementById('parentDiv').style.height;
document.getElementById('childDiv').style.height = height +'px';