浏览器计算高度：包含块和子项答案

【问题标题】：Height Calculation By Browsers : Containing Blocks and Children浏览器计算高度：包含块和子项
【发布时间】：2017-01-11 13:29:13
【问题描述】：

在 SO 本身中提取了这一点 - 浏览器为具有儿童（相对于容器具有百分比高度）：

在没有设置高度的情况下，我设置了min-height，但它不起作用 - 请注意，高度的计算值是我为min-height 提供的值。孩子们没有达到我给他们的 50% 的高度 - 见下文：

    * {
          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>

现在我设置height: 0 它可以工作了！请参见下面的示例：

    * {
          box-sizing: border-box;
        }
        .inline-container,
        .block-container,
        .float-container,
        .inline-block-container {
          border: 1px solid red;
          min-height: 100px;
          height: 0;
        }
        .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>

问题：

所以我的问题是——这里发生了什么——我真的很惊讶！当我给它一个最小高度时，为什么孩子们不尊重包含块的计算高度。各位大佬能看一下吗？

【问题讨论】：

标签： html css

【解决方案1】：

MDN 上的 height CSS 属性：

百分比

百分比是相对于高度计算的生成框的包含块。 如果包含的高度块没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，该值计算为自动。 根元素上的百分比高度是相对的到初始包含块。

在1.中，没有明确指定父级的height属性，因此该值计算为auto。

在2. 中，指定了 height 属性，因此它是相对于父级计算的

【讨论】：

但是对于1.，我通过在浏览器中检查来检查计算的高度，它给出了我为min-height 设置的值而不是auto
@kukkuz min-height 覆盖 height。 height 仍未明确指定。
是的，当然，但是正如我之前在检查浏览器的计算值时所说的那样，该值不是计算到auto...这就是为什么感到困惑。 ..
@kukkuz 高度的计算值不是百分比值或自动值；它是一个像素数。在这种情况下，值 50% 的计算方式与您将其设置为 auto 的方式相同，根据规范。您可以在浏览器开发工具中看到计算值，通常在 css 规则旁边的选项卡中。
当然，这也是我检查的地方... :) 它显示的是 100px 而不是 auto