StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you're trying to apply background images to <code>html</code> and <code>body</code> that fill up the entire browser window, neither. Use this instead:</p> <pre class="lang-css prettyprint-override"><code>html { height: 100%; } body { min-height: 100%; } </code></pre> <p>My reasoning is given <a href="https://stackoverflow.com/questions/10947541/applying-a-background-to-html-and-or-body/10947583#10947583">here</a> (where I explain holistically how to apply backgrounds in this manner):</p> <blockquote> <p>Incidentally, the reason why you have to specify <code>height</code> and <code>min-height</code> to <code>html</code> and <code>body</code> respectively is because neither element has any intrinsic height. Both are <code>height: auto</code> by default. It is the viewport that has 100% height, so <code>height: 100%</code> is taken from the viewport, then applied to <code>body</code> as a minimum to allow for scrolling of content.</p> </blockquote> <p>The first way, using <code>height: 100%</code> on both, prevents <code>body</code> from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn't <em>prevent</em> the content from scrolling, but it does cause <code>body</code> to leave a gap beneath the fold, which is usually undesirable.</p> <p>The second way, using <code>min-height: 100%</code> on both, doesn't cause <code>body</code> to expand to the full height of <code>html</code> because <code>min-height</code> with a percentage doesn't work on <code>body</code> unless <code>html</code> has an explicit <code>height</code>.</p> <p>For the sake of completeness, <a href="http://www.w3.org/TR/CSS21/visudet.html" rel="noreferrer">section 10 of CSS2.1</a> contains all the details, but it's an <em>extremely</em> convoluted read so you can skip it if you're not interested in anything beyond what I've explained here.</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