StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you look at <a href="http://media.digg.com/App_PermaFrame/media/css/186/permaframe.css" rel="nofollow noreferrer">their CSS</a>, they use <code>height: 100%</code> for the <code>iframe</code>:</p> <pre><code>iframe#diggiFrame { color: #666; width: 100%; height: 100%; z-index: 10; -webkit-box-sizing: border-box; } </code></pre> <p>They position the DiggBar above that with a height of <code>46px</code>, so the <code>iframe</code> takes 100% of the remaining space. They use <code>overflow: hidden</code> on the <code>body</code> element to keep the <code>iframe</code> entirely within the vertical height of the page, rather than allowing the page to scroll. This means that the scroll bar will then appear inside the <code>iframe</code>, instead of for the whole page. Note that the the way the DiggBar does it works only in quirks mode in Firefox; see below for how to do it in standards mode.</p> <pre><code>body { padding: 46px 0 0 0; margin: 0; background: #fff; overflow: hidden; color: #333; text-align: left; } #t { width: 100%; min-width: 950px; height: 46px; z-index: 100; position: absolute; top: 0; left: 0; /* overflow: hidden; */ border-bottom: 1px solid #666; background: #fff url(/App_PermaFrame/media/img/back.gif) repeat-x; line-height: 1; } </code></pre> <p><strong>edit</strong>: For those who don't believe me, here is a <a href="http://ephemera.continuation.org/stackoverflow/iframe.html" rel="nofollow noreferrer">small example</a>. To get it to fill the entire space, you need to set it to have no border, and you need <code><body></code> to have no margins.</p> <p><strong>edit 2</strong>: Ah, sorry, I see what you were talking about. You need the <code>overflow: hidden</code> on the <code>body</code> tag to get the scroll bar to work the way you want.</p> <p><strong>edit 3</strong>: It looks like you have to be in quirks mode for this to work in Firefox; if you include a <code><!DOCTYPE html></code> declaration, that puts you into standards mode, and your <code>iframe</code> comes out too small.</p> <p><strong>edit 4</strong>: Ah, you can do it in standards mode in Firefox as well. Got the answer <a href="http://www.justin-cook.com/wp/2007/02/19/how-to-set-an-iframe-to-100-height-in-firefox/" rel="nofollow noreferrer">here</a>. You need to set the height on your <code><html></code> and <code><body></code> elements to <code>100%</code> as well. (Note that the <code><!DOCTYPE html></code> is the doctype for <a href="http://www.w3.org/TR/html5/" rel="nofollow noreferrer">HTML 5</a>, which is a work in progress; however, it works on all modern browsers for turning on standards mode).</p> <pre><code><!DOCTYPE html> <html> <head> <style type="text/css" media="all"> html, body { height: 100% } body { margin: 0; overflow: hidden; } #topbar { height: 50px; width: 100%; border-bottom: 1px solid #666 } #iframe { height: 100%; width: 100%; border-width: 0 } </style> </head> <body> <div id="topbar"> <h1>This is my fake DiggBar</h1> </div> <iframe id="iframe" src="http://www.google.com/"></iframe> </body> </code></pre>

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