[ANSWERED] html – CSS: What is the defined behaviour for parent height:auto and children height:100%?

Question 1

You’ve not given the HTML a DOCTYPE, so the normal CSS rules are modified by the page being rendered in quirks mode.

This effect you see is described in the Quirks Mode Living Standard

3.5. The percentage height calculation quirk

In quirks mode, for the purpose of calculating the height of an
element element, if the computed value of the position property of
element is relative or static, the specified value for the height
property of element is a <percentage>, and element does not have a
computed value of the display property that is table-row,
table-row-group, table-header-group, table-footer-group, table-cell or
table-caption, the containing block of element must be calculated
using the following algorithm, aborting on the first step that returns
a value:

Let element be the nearest ancestor containing block of element, if
there is one. Otherwise, return the initial containing block.

If element has a computed value of the display property that is
table-cell, then return a UA-defined value.

If element has a computed value of the height property that is not
auto, then return element.

If element has a computed value of the position property that is
absolute, or if element is a not a block container or a table
wrapper box, then return element.

Jump to the first step.

Following this algorithm through, and taking into account the quirks rules 3.6. The html element fills the viewport quirk and 3.7. The body element fills the html element quirk you’ll see that the 100% height of the .box elements is 100% of the computed height of the body element, which is 100% of the height viewport less the default margins that the body element has.

Codepen automatically adds the DOCTYPE to your mark-up, so the above quirks mode rules do not apply. Instead, the height of the .box elements is determined by the normal CSS rules for percentage heights, which states that in your case “the used height is calculated as if ‘auto’ was specified”, and then 10.6.3 Block-level non-replaced elements in normal flow when ‘overflow’ computes to ‘visible’ which says the height is the height of the element’s content.

Question 2

What is the defined behavior if the parent height is auto and 2 children with height:100% are placed below each other in it. For example:

<html>
    <style>
        .cont {
            height: auto;
            background-color:silver;
        }
        .box {
            width:50px;
            height:100%;
        }
    </style>
    <body>
        <div class="cont">
            <div class="box" style="background-color:yellow;"> a </div>
            <div class="box" style="background-color:red;"> b </div>
        </div>
    </body>
</html>

https://codepen.io/kisvegabor/pen/XWXVQOX

In Chrome and Firefox the children are (more or less) screen-sized but in CodePen their height fits the content.

Bollate

[ANSWERED] html – CSS: What is the defined behaviour for parent height:auto and children height:100%?

By

Solution 1 :

3.5. The percentage height calculation quirk

Problem :

By

Related Post

[ANSWERED] html – Hidden Div Text Reappears?

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate