CSSテーブルが、最大高さが0の要素の高さを表示するのはなぜですか？

Question

私はテーブルとして表示している外側がdiv、内側が2 divsです。

最初の内部divは左に浮動します。

実際の結果は：

第二の内側のdivは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>

期待される結果の最大高さを有します10

テーブルは何らかの理由で高さが0のdivを考慮しています。

JSFiddle

Answer 1

のdivの非ゼロline-heightに起因する原因と匿名セルのvertical-align: baselineです。

私はあなたがdisplay: tableが必要な場合は、その後、あなたは匿名の表のセルのスタイルを設定することはできません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>

とセルのスタイルを設定できるようにするために、display: table-cellを使用していますが、あなたでしょうスペースをline-height: 0で減らすことができます。

.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

.hidden DIVはまだ.d-table要素の位置の計算にDOMおよび因子の一部であるためです。

max-height: 0;の代わりにdisplay: noneを使用してください。これにより、DOMのフローから要素が削除されます。

Answer 3

.hidden要素は、理論的には0 の高さで正しく表示されている。しかし、他のDIVのハスfloat:left、そして両親が表として表示されている間、それは、clear:bothを持っています。 これは親divの高さを混乱させる魔法のコンボです。

問題は次のとおりです。ドキュメントフローの最初のdivを最初に取ります。それは新しい場所に置かれますが、それでも実際にはありません（はい、浮動小数点数はf ***のように気まぐれです）。 あなたはclear:bothの2番目のdivを新しい行に強制します。親div（最初のdivとそれを占める18ピクセルのすべてを忘れてしまった）は、ディスプレイテーブルなので0の高さを持つことができないので、何かの最低高さが与えられます。

この組み合わせを使用していない場合よりも、私には他に解決策がありません。私は隠しdivを実際に隠すことをお勧めします（display:none）。