StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><code>height: 100%</code> never works like you want it to. The CSS specifications dictate that it must equal the height of the browser window, or the closest parent block-level element with an <em>absolute</em> height specified. That means that this code <strike>will</strike> <em>should</em> not work as expected:</p> <pre><code><!DOCTYPE html> <html> <head> <title>Want the body to fill the page? Too bad!</title> <style type="text/css"> html, body { height: 100%; } .page { padding-top: 50px; box-sizing: border-box; height: 100%; } .header { margin-top: -50px; height: 50px; } .body { height: 100%; background: gray; } </style> </head> <body> <div class="page"> <div class="header"> <h1>Too bad!</h1> </div> <div class="body"> <p>Hello cruel world...</p> </div> </div> </body> </html> </code></pre> <p>However, that works fine in Chrome. Why? I can only assume that Google decided to <strong>specifically go against web standards</strong> because in this case, the standards <strong><em>make no sense</em></strong>. Why would I want something to be the exact height of the browser window? The only time is a <code><div></code> wrapping the whole page; in this case a simple "height is relative to the parent block" rule works just fine without breaking expectations elsewhere.</p> <p>There is a way around this, though. At least, that's what I wanted to say before I tried this in Firefox too. Another way to get <code>height: 100%</code> (with some restrictions) is with <code>position: absolute</code>. However, it would seem that Firefox isn't respecting <code>position: relative</code> on a <code>display: table-cell</code> element - probably those pesky standards again. Here's the code for this technique anyway, if you are interested:</p> <pre><code>#wrapper > div > #middleleft { position: relative; } .scroll-pane { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </code></pre> <p>So what can you do? Well, unfortunately, I don't yet know the answer to that. A kludgy solution would be to have Javascript set the height to an absolute pixel value, and attach an event to window resizing in order to update that height. I'll get back to you if I find a better way.</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