浏览器的高度计算：包含块和子元素

小编典典

浏览器的高度计算：包含块和子元素

css

在SO本身中进行了选择-由浏览器（当我们没有显式设置a height而是设置a时min-height）为具有子容器
（相对于容器的高度百分比）的“高度计算” ： __

如果不设置高度，则进行设置min-height，但不起作用，请注意，计算出的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>

题：

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

阅读 292

2020-05-16

共1个答案

小编典典

MDN的 height
CSS属性：

百分比

相对于生成的盒子的包含块的高度计算百分比。
如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则该值将计算为auto。
根元素上的百分比高度是相对于初始包含块的高度。

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

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

2020-05-16