Question

在SO本身中选择了这个 - 高度计算＆＃39;由浏览器制作（当我们没有明确设置height但我们为容器设置了min-height） <相对于容器的高度百分比）：

在没有设置高度的情况下，我设置min-height并且它没有工作 - 请注意计算的高度值是我为min-height提供的值。孩子们没有达到我给他们50％的身高 - 见下文：

＆＃13;

    * {
          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%;
        }

＆＃13;

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

＆＃13;

现在我设置height: 0它有效！见下面的例子：

＆＃13;

    * {
          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%;
        }

＆＃13;

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

＆＃13;

问题：

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

Answer 1

MDN上的高度 CSS属性：

百分比

百分比是根据高度来计算的   生成的包含块的块。 如果含有的高度   未明确指定块（即，它取决于内容   高度），这个元素并不是绝对定位的值   计算到自动。根元素的百分比高度是相对的   到最初的包含块。

在1.中，未明确指定父级的高度属性，因此该值计算为自动。

在2.中，指定了高度属性，因此根据父级计算

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

1 个答案: