title: Automatically scale element to fit viewport / device orientation
body: <p>I have the following markup: (simplified)</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  ...
  &lt;body&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="content"&gt; (absolutely positioned stuff) &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>with the following styles:</p>
  
  <pre><code>.wrapper {
     width: 100%;
     height: 100%;
  }
  
  .content {
    width: 640px;
    height: 640px;
    margin: 0 auto;
    position: relative;
    background-color: orange;
  }
  </code></pre>
  
  <p>On a desktop (screens larger than 640px x 640px) my square is top and center, which looks good. On mobile portrait, my square is top and fills the width, which is also good and perfectly acceptable. On mobile landscape (screens less than 640px tall), however, my square fills the entire width and the user will need to scroll to see the bottom of the square, which is not acceptable.</p>
  
  <p>What I'd like to achieve is for the square to fit the height of the screen so it can be seen in its entirety in landscape view. I'm trying some media queries out now to see if that helps. Otherwise, what would be the best way to achieve this?</p>
  
  <p>I've tried changing <code>.content</code> to <code>height: 100%</code>, but because most of its contents are absolutely positioned they end up having 0px height. As such, ideally the square should still be 640px x 640px in size, just scaled to fit the screen so the contents can stay put.</p>
  
  <p>Thanks.</p>