title: Iframe/CSS: Forcing Iframe to fit screen
body: <p>I'm currently trying to have an iframe fit the size of my screen, and any other user using it at different resolutions, except no matter what I try I'll either end up with the iframe being too small or the height being too large causing a double scroll bar. (The iframe and the page itself having scroll bars).</p>
  
  <p>My objective is having the iframe fit only 85% width of the page (which works!), 100px from the top of the screen (also works), and then for the bottom to fit the edge of the bottom of my browser (that's where I'm stuck...)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="maindiv" class="maindiv"&gt;
  &lt;iframe id="theiframe" class="iframeautowidth" seamless src="http://whateverdomain.com&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.maindiv {
  width: 85%; 
  top: 100px;
  }
  
  .iframeautowidth {
  left: 0px;
  top: 0px;
  bottom: 0px;
  width: 85%;
  height: 100%;
  border: 0
  overflow: hidden;
  display: block;
  margin: 0;
  float: left;
  }
  </code></pre>
  
  <p>If it counts for anything, I have the latest jquery running on my page if it'll help. Thanks in advance!</p>