Warum zeigt meine CSS-Tabelle die Höhe für ein Element mit der maximalen Höhe 0 an?

Question

Ich habe eine äußere div, die ich als Tabelle anzeigen, und und 2 innere divs.

Das erste innere div ist nach links schwebend. Die zweite innere div hat eine maximale Höhe von 0.

.d-table { 
 
     display: table; 
 
     border: solid 1px black; 
 
    } 
 

 
    .float-left{ 
 
\t  float: left; 
 
    } 
 

 
    .hidden{ 
 
     max-height: 0px; 
 
     overflow-y: hidden; 
 
\t clear: both; 
 
    }

<div class="d-table"> 
 
     <div class="float-left"> 
 
     hey 
 
     </div> 
 
     
 
     <div class="hidden"> 
 
     cool 
 
     </div> 
 
    </div>

Erwartetes Ergebnis ist:

tatsächliche Ergebnis ist:

Die Tabelle berücksichtigt das Div mit einer Höhe von 0 aus irgendeinem Grund.

JSFiddle

Answer 1

Scheint Ursachen aufgrund nicht-Null line-height des div und die vertical-align: baseline der anonymen Zelle.

würde ich display: table-cell nutzen, um der Lage zu sein, die Zelle mit vertical-align: top

.d-table { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    border: solid 1px black; 
 
} 
 
.float-left { 
 
    float: left; 
 
} 
 
.hidden { 
 
    max-height: 0px; 
 
    overflow-y: hidden; 
 
    clear: both; 
 
}

<div class="d-table"> 
 
    <div class="float-left">hey</div> 
 
    <div class="hidden">cool</div> 
 
</div>

Wenn Sie display: table brauchen, um Stil, dann können Sie die anonyme Tabellenzelle nicht Stil, aber Sie kann den Raum mit line-height: 0 reduzieren.

.d-table { 
 
    display: table; 
 
    vertical-align: top; 
 
    border: solid 1px black; 
 
} 
 
.float-left { 
 
    float: left; 
 
} 
 
.hidden { 
 
    line-height: 0; 
 
    max-height: 0px; 
 
    overflow-y: hidden; 
 
    clear: both; 
 
}

<div class="d-table"> 
 
    <div class="float-left">hey</div> 
 
    <div class="hidden">cool</div> 
 
</div>

Answer 2

Dies liegt daran, das .hidden div noch Teil des DOM und Faktoren in die Positionsberechnungen für das .d-table Element ist.

Verwenden Sie anstelle von max-height: 0;display: none. Dies entfernt das Element aus dem Fluss des DOM.

Answer 3

Das .hidden Element theoretisch wird richtig mit einer Höhe von 0. angezeigt, aber dann hat es ein clear:both, während der andere div hass float:left, und ihre Eltern als Tabelle angezeigt. Dies ist die magische Kombination, die die Höhe des Eltern-Div.

Das Problem ist: Sie nehmen zuerst die erste Div aus dem Dokumentenfluss. Es ist irgendwo neu platziert, aber immer noch nicht wirklich da (ja, Floats sind unheimlich wie f ***). DANN du clear:both das zweite Div, zwingt es auf eine neue Zeile. Das Eltern-Div (das alles über das erste Div und die 18 vertikalen Pixel, die es aufnimmt, vergessen hat) kann keine Höhe von 0 haben (weil es eine Display-Tabelle ist), also hat es eine minimale Höhe von etwas-etwas.

Es gibt wirklich keine andere Lösung, die mir bekannt ist, als diese Kombination nicht zu verwenden. Ich würde empfehlen, das verborgene Div (display:none) tatsächlich zu verbergen.