Databases
StackOverflow2013
Postsdbo
POMake an iframe fill to bottom of screen without using tables
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMake an iframe fill to bottom of screen without using tables
    text
    copied!<p>I want display a header with arbitrary content above an iframe that takes up the rest of the screen. I have managed to get this working with tables using the following:</p> <pre><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&gt; &lt;head&gt; &lt;style&gt; html, body, iframe, table, tr, td { margin: 0; padding: 0; } html, body, iframe, table, #content { height: 100%; width: 100%; } table { border-collapse: collapse; } iframe { border: 0; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;tr&gt;&lt;td&gt; &lt;div id="header"&gt; &lt;p&gt;some arbitrary stuff in a header&lt;/p&gt; &lt;p&gt;this is sized dynamically&lt;/p&gt; &lt;p&gt;it's not a fixed size&lt;/p&gt; &lt;/div&gt; &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td id="content"&gt; &lt;iframe src="http://www.bing.com/search?q=stackoverflow" /&gt; &lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>That works in Firefox and Chrome, but not IE7 (I don't know why). Without using tables, this is the closest I could get:</p> <pre><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&gt; &lt;head&gt; &lt;style&gt; html, body { margin: 0; padding: 0; height: 100%; } iframe { margin: 0; padding: 0; width: 100%; border: 0; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="header"&gt; &lt;p&gt;some arbitrary stuff in a header&lt;/p&gt; &lt;p&gt;this is sized dynamically&lt;/p&gt; &lt;p&gt;it's not a fixed size&lt;/p&gt; &lt;/div&gt; &lt;iframe src="http://www.bing.com/search?q=stackoverflow" /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This looks the same in all browsers, but the iframe is too short. If I set its height to 100% though, it grows as big as the screen and 2 scrollbars appear (the same as IE7 in the table version). I want the iframe to take up whatever space is left in the browser window, but not more. I would rather not have to resort to Javascript. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload