title: 2-column layout: divs either equal to height of longest, or height of viewport
body: <p>So I've been trawling SO for an answer to my conundrum, and I know of course the whole chaos with faux-columns and backgrounds and overflow and negative margins but either I'm blind or nobody has solved this one yet.</p>
  
  <p>The situation is very simple:</p>
  
  <ul>
  <li>The body is 100% width.</li>
  <li>I want a two-column layout.</li>
  <li>If the content in both columns is smaller than the viewport height, I want both columns to be the height of the viewport.</li>
  <li>If the content in either column is longer than the viewport height, I want both columns to be the height of the longest.</li>
  </ul>
  
  <p>Is there no way to resolve this without too many CSS hacks? I don't mind terribly about backwards compatibility (for instance, I'm happy to use vw units), as long as the site doesn't fall apart completely in older browsers.</p>
  
  <p>I'd post some example code but all I have so far is half a dozen files, each testing one of the popular solutions. The latest one is using vw:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="left"&gt;Left&lt;/div&gt;
  &lt;div id="right"&gt;Right&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      margin:0;     /* This is used to reset any browser-default margins */
      height:100vh; /* This is needed to overcome a Chrome bug. */
      width:100vw;  /* As above. */
  }
  div {
      height:100vh;
  }
  #left {
      background:snow;
      float:left;
      width: 20vw;
  }
  
  #right {
      background:teal;
      float:right;
      width: 80vw;
  }
  </code></pre>
  
  <p>This solves the first, viewport-height problem, but not the second, longest-column problem (as visible if you fill either column with content).</p>