Höhenberechnung durch Browser: Enthält Blöcke und untergeordnete Elemente

Question

Sep 03, 2016, 06:45 PM

Höhenberechnung durch Browser: Enthält Blöcke und untergeordnete Elemente

Habe dies in SO selbst aufgegriffen - die 'Höhenberechnung', die von Browsern durchgeführt wurde (wenn wir nicht explizit ein @ gesetzt habenheight aber wir haben ein @ gesetmin-height) Für einContaine das hatKinde (die die Höhe in Prozent in Bezug auf den Container haben):

Ohne eine Höhe einzustellen, stelle ichmin-height und es funktioniert nicht - beachte, dass der berechnete Wert für height der Wert ist, den ich für @ angegeben hamin-height. Die Kinder werden nicht 50% größer als ich - siehe unten:

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

etzt setze ichheight: 0 Es klappt! Siehe folgendes Beispiel:

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

Frage

Also meine Frage ist - was passiert hier - ich bin wirklich überrascht! Warum respektieren die Kinder die berechnete Höhe des umschließenden Blocks nicht, wenn ich ihm eine minimale Höhe gebe? Könnt ihr das untersuchen?