StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I played around with your example and re-created it in a table as well to see how the browsers behave. It's exactly the same: <a href="http://jsfiddle.net/scheinercc/hXYVm/" rel="nofollow noreferrer">http://jsfiddle.net/scheinercc/hXYVm/</a> <br> <em>(tested on Mac OS Firefox Aurora/20 and Chrome latest stable)</em></p> <p>So I guess what Chrome does is a bit of a trick, assuming that this result is what devs usually want.</p> <p>But how I read the code:</p> <ul> <li>The <code>td</code>s height is defined only by the font size and line height of it's children. A child's 100% height is determined by the parent.</li> <li>Adding the height to the <code>td</code> will give you a <code>td</code> with a 100% height referring to the viewport (in Firefox - and I guess in IE), that means footer and header are not visible if you scroll to the middle of the page.</li> </ul> <p>Chrome assumes again, that this is actually not what we (devs) hoped for and gives the same result as before, by calculating the following.</p> <p>I'd say, what you want is actually:</p> <pre><code>containerHeight = 100% of page height - (headerContainerHeight + footerContainerHeight) </code></pre> <p>Please find a small JS excample in this fiddle: <br> <a href="http://jsfiddle.net/scheinercc/DaYCa/35/" rel="nofollow noreferrer">http://jsfiddle.net/scheinercc/DaYCa/35/</a> <br> <em>(tested on Mac OS Firefox Aurora/20 and Chrome latest stable)</em></p> <p>I know it would have been nicer to have a HTML/CSS solution, but I can't think of any atm.</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