html - Height Calculation By Browsers : Containing Blocks and Children

Question

Welcome To Ask or Share your Answers For Others

html - Height Calculation By Browsers : Containing Blocks and Children

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Height Calculation By Browsers : Containing Blocks and Children

Picked up this in SO itself - the 'height calculation' made by browsers (when we have not explicitly set a height but we have set a min-height) for a container that has children (who have height in percentages with respect to the container):

Without setting a height, I set min-height and it doesn't work- note that the computed value of height is the value I gave for min-height. The children do not get 50% height that I have given them - see below:

    * {
          box-sizing: border-box;
        }
        .inline-container,
        .block-container,
        .float-container,
        .inline-block-container {
          border: 1px solid red;
          min-height: 100px;
        }
        .inline-container > * {
          border: 1px solid;
          height: 50%;
        }
        .block-container > * {
          border: 1px solid;
          height: 50%;
        }
        .float-container > * {
          float: left;
          border: 1px solid;
          height: 50%;
        }
        .float-container:after {
          clear: both;
          content: '';
          display: block;
        }
        .inline-block-container > * {
          display: inline-block;
          border: 1px solid;
          height: 50%;
        }

    <body>
          <div class="inline-container">
            <span>Inline 1</span>
            <span>Inline 2</span>
          </div>
          <div class="block-container">
            <div>Block 1</div>
            <div>Block 2</div>
          </div>
          <div class="float-container">
            <div>Float 1</div>
            <div>Float 2</div>
            <div>Float 3</div>
          </div>
          <div class="inline-block-container">
            <div>Inline block 1</div>
            <div>Inline block 2</div>
            <div>Inline block 3</div>
          </div>
        </body>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:08:40+0000

The height CSS property on MDN:

Percentages

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. A percentage height on the root element is relative to the initial containing block.

In 1., the height attribute of the parent isn't explicitly specified, therefore the value computes to auto.

In 2., the height attribute is specified and therefore it's calculated with respect to the parent

Categories

html - Height Calculation By Browsers : Containing Blocks and Children

html - Height Calculation By Browsers : Containing Blocks and Children

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags