StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The reason why things do not work the way you expect is simply because <code>max-height</code> does not set the height of the containing div. All it does is, as its name implies, set a maximum limit to the height of the div. </p> <p>Here's a quote from the <a href="http://www.w3.org/TR/CSS2/visudet.html#the-height-property" rel="noreferrer">W3 CSS2 specification</a> on how the percentage heights are calculated on block elements. This might help to shed some light on the matter:</p> <blockquote> <p>The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.</p> </blockquote> <p>In your case the height of the containing div is not set explicitly and depends on content height, because when you set the <code>max-height</code> of the containing div to <code>90%</code>, and there is not enough content to stretch the containing div to <code>90%</code> of the height of its own containing element, the height of the containing div will be less than 90% of the height of its own containing element.</p> <h3>An attempt to explain what I believe is happening</h3> <p>The browser renders the containing div with an initial height of <code>auto</code>, which computes to <code>0px</code> as there is no content yet. Along comes the contained div which wants to be rendered with a height of <code>100%</code> of the height of its containing block, the browser realizes that this is ridiculous, as <code>100%</code> of <code>0px</code> is exactly <code>0px</code> again. So it decides to set the height of the contained div to <code>auto</code> instead. If it didn't do so, then the contained div would never be visible, <em>because no matter what happens next</em>, <code>100%</code> of the containing block's height of <code>0px</code> is always going to be <code>0px</code>. Remember that the browser is trying to stick to this part of the rule quoted above:</p> <blockquote> <p>The percentage is calculated with respect to the height of the generated box's containing block</p> </blockquote> <p><em>ONLY NOW</em> along come some more div's which would like to be rendered inside the contained div. At the moment when the previous decisions were made, the browser didn't yet know about these div's, they're a bit late to the party. If the browser was then to backtrack and fix itself up after it had rendered those div's, it would effectively be breaking the part of the rule quoted above. As it would <em>indirectly</em><sup>*</sup> be setting the percentage height of the contained div based on the height of its contents. </p> <p>Because of this the W3 specification people have come up with the second part of the rule. Which lets the browser decide to set the height of the contained div to <code>auto</code> if the height of its containing div is not set (and therefore defaults to <code>auto</code>). </p> <p>So you could say that those late div's are lucky that the browser has taken some precautions and is still able to render those div's, as it has been preemptive and has set the height of the contained div to <code>auto</code> to accommodate for latecomers.</p> <p><sub>*by calculating the height of the containing div based on the height of the contents of the contained div, and then basing the percentage height of the contained div on this value.</sub></p> <h3>In conclusion</h3> <p>Browsers are just sticking to the W3 specification, which is a good thing. Your first fiddle works because the browser makers are adhering to the specification, and your second fiddle doesn't work for the exact same reason.</p> <h3>The solution</h3> <p>You can only fix your issue by making sure that the div which you want to have a height of <code>90%</code> of the browser window is a direct descendant of a div which has its height set to <code>100%</code> of the browser window. If the ancestor div is not absolutely placed, every ancestor of the div, all the way up to the <code>html</code> document element, would also have to have a height of <code>100%</code> set on itself. </p> <p>The line above is true, <em>except</em> if an ancestor is encountered which is absolutely placed (which would take it out of the regular document flow), without this ancestor itself having an ancestor with <code>position: relative</code> set (which would force its absolute positioning to be based on the position of its relatively positioned parent instead of on the height of the browser window), and this ancestor is set to be the height of the browser window (using <code>top: 0px; bottom: 0px;</code>). In that case the running up the DOM tree will stop at the absolutely positioned ancestor.</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