親divの高さは、有限の高さを持つ子を持っていてもゼロです。

Question

私は、レイアウトが図に示されているウェブサイトを持っています。身体は、,parent divおよびfooterからなるmain containerからなる。 parent divはさらに、図示のようにいくつかのchild divを含む。

すべてchild divの高さという問題が有限です。しかし、parent divには子div以外は何も入っていません。すべての子divは表示されますが、親divの高さはゼロに表示されます。将来的に子供の数が増えれば失業の原因となるかもしれないので、あらかじめ指定された値を与えて親のdivの高さを固定していません。

親divのサイズがゼロであるという問題は、私のフッターdivが上がり、親divの内容と衝突していることです。これは適切なマージントップを与えることで解決できますが、それは私が探している解決策ではありません。

親のdivの高さが現在の子divの高さに応じて自動的に変わるように、誰かから何かを提案できますか？

私の疑問に疑問がある場合は、ご意見ください。

#parentdiv:after { 
    content: " "; 
    display: block; 
    clear: both; 
} 

ダイダロスはおそらく子divを浮動している、彼のコメントで示唆したように：あなたのスタイルシートに以下を追加

Answer 1

clearfix classのケースがあるようです。

だから私はあなたが子供のdivを浮かべていると推測しているので、親のdivの高さは0です。 フロートを使うと、親は子供の高さに適応しません。

しかし、 'clearfix'クラスを追加すると（あなたのスタイルシートに追加する必要があります）、 '。'が追加されます。最後に（もちろん目に見えない）、あなたの親は魔法のように正しい高さになるでしょう。

注：クロスプラットフォーム、互換性のあるIE6 +、Chrome、Safari、Firefoxの場合は、名前を付けてください。

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 

Answer 2

してみてください。もしそうなら、上の行はそれを修正します。

物事を浮かべるときの問題は、親要素がそれらを「無視」することです。

上記の行は、（擬似）要素を作成し、#parentdivに挿入します。#parentdivは、すべての浮動小数点数を超えてプッシュダウンされます。親divは浮動小数点を無視しますが、この擬似要素を無視しません。擬似要素を含むように展開します。さて、擬似要素は浮動小数点のすべての子孫の下にあるので、親divが発生するか、浮動小数点の子を同様に「含む」ように見えます。これが本当に必要なものです。