title: Set height of <div> = to height of another <div> through .css
body: <p>I have two <code>&lt;div&gt;</code> elements. Right now my simplified .css is thus:</p>
  <pre><code>#leftdiv {
      /*this is the navigation pane*/
      min-height: 600px;
      max-height: 600px;
  }
  #rightdiv {
      /*this is the primary pane*/
      min-height: 600px;
      max-height: 600px;
      overflow-y: auto;
  }
  </code></pre>
  <p>I've set a hard min- and max-heights for both so they keep the same height, and if content overflows out of the <code>#rightdiv</code>, a scrollbar appears. I'd like this scrollbar to be gone and having the <code>#rightdiv</code> and <code>#leftdiv</code> stretch to fit the contents of the <code>#rightdiv</code>. I want the whole site to stretch height-wise to fit the contents, but if I remove the <code>overflow-y: auto;</code> from my .css and remove the max-heights, the <code>#rightdiv</code> stretches, but the <code>#leftdiv</code> doesn't, yielding some truly ugly design.</p>
  <p>I'd like something like the below:</p>
  <pre><code>#leftdiv {
      min-height: equal to #rightdiv height if #rightdiv is taller, else 600px;
  }
  #rightdiv {
      min-height: equal to #leftdiv height if #leftdiv is taller, else 600px;
  }
  </code></pre>
  <p>How would I go about setting the min-height of both like this?</p>