web-dev-qa-db-ja.com

親のdivの高さは、有限の高さの子がある場合でもゼロです

レイアウトが図に示されているWebサイトがあります。本文はmain container、これはheader、parent divおよびfooter。 parent divにはさらにいくつかのchild div示されているとおり。

Webpage Layout

問題は、すべてのchild divは有限です。しかし parent divには、子divのみが含まれます。すべての子divは表示されますが、親divの高さはゼロとして表示されます。また、将来的に子供の数が増えた場合に失策を引き起こす可能性があるため、事前に指定された値を指定して親divの高さを固定していません。

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

誰かが私に何らかの方法を提案して、親divの高さが存在する子divの高さに応じて自動的に変わるようにすることができますか？.

疑問がある場合はコメントしてください！

csscss3heightparent-child
53
Prashant Singh

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%;
}
83
VVV

以下をスタイルシートに追加してみてください：

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

Daedalusが彼のコメントで示唆したように、おそらく子divをフローティングしているでしょう。その場合、上記の行で修正します。

あなたが物事をフロートするときの問題は、親要素がそれらを「無視」することです。

上記の行は、（擬似）要素を作成し、＃parentdivに挿入します。この要素は、フロートされたすべてのdivを超えてプッシュダウンされます。その後、フロートされた子を無視しますが、このdiv要素を無視しない親div-本来の動作として、擬似要素を含むように展開します。さて、擬似要素はすべてのフロートされた子よりも下にあるため、親divが発生するか、さらに良いことに、フロートされた子も「含まれている」ように見えます。

48
banzomaikaka