title: Full Page <iframe>
body: <p>I have the example code below. This works fine with all browsers except for browsers on mobile devices.</p>
  
  <p>The overflow tag is the issue.</p>
  
  <p>Works with all except for mobile:</p>
  
  <pre><code>margin: 0; padding: 0; height: 100%; overflow: hidden;
  </code></pre>
  
  <p>Works with all mobile and not computers:</p>
  
  <pre><code>margin: 0; padding: 0; height: 100%;
  </code></pre>
  
  <p><strong>What's the best way to get it to work on both?</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;title&gt;Test Layout&lt;/title&gt;
          &lt;style type="text/css"&gt;
              body, html
              {
                  margin: 0; padding: 0; height: 100%; overflow: hidden;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;iframe width="100%" height="100%" src="http://www.cnn.com" /&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>