title: Resize div width as browser height is changed using CSS
body: <p>Have been searching for a few days for a CSS only solution to maintaining aspect ratio of a div. The important part is that the div height should be as the browser window height (without scrolling and without hiding overflow), and the width percentages should adjust to keep the aspect ratio correct. Everything I've found so far (mostly the padding trick) uses the parent element's width to maintain aspect, and adds a lot of extra space below the div, especially in  full screen on large displays. </p>
  
  <p>Really trying to avoid javascpript.</p>
  
  <p>Here is my basic setup:</p>
  
  <p>::Edit:: added link to jsfiddle -- <a href="http://jsfiddle.net/SUbYB/" rel="nofollow">http://jsfiddle.net/SUbYB/</a>
  ::Edit 2:: just using jQuery to handle set width of div based on height. Thanks all!</p>
  
  <p>stylesheet</p>
  
  <pre><code>body, html{
      width: 100%;
      height: 100%;
      max-height: 100%;
      max-width: 100%;
  }
  .super-container{
      position: relative;
      width: 69.8%;
      height: 95%;
      max-width: 2008px;
      margin: 0 auto;
      padding: 0 15.1% 0 15.1%;
      background: rgba(200,200,200,.2);
  }
  .aspect-container{
      position: relative;
      display: block;
      height: 95%;
      margin: 0 auto;
      background: rgba(200,200,200,.4);
  }
  .aspect-critical-content{
      position: absolute;
      top:0; right: 0; bottom: 0; left: 0;
      background: rgba(200,0,0,.2);
  }
  </code></pre>
  
  <p>and html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="super-container"&gt;
       &lt;div class="aspect-container"&gt;
  
           &lt;div class="aspect-critical-content"&gt;
           &lt;/div&gt;
  
       &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks for any help in advance!</p>