66

レイアウトが図に示されている Web サイトがあります。本体は、 、、およびmain containerで構成される で構成されます。には、示されているようにさらにいくつかが含まれています。headerparent divfooterparent divchild div

ウェブページのレイアウト

すべての高さの問題child divは有限です。ただし、parent div子div以外は何も含まれていません。すべての子 div が表示されますが、親 div の高さはゼロとして表示されます。また、将来子の数が増えると失敗する可能性があるため、事前に指定された値を指定して親divの高さを修正していません。

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

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

疑問を質問する際に不明な点がある場合は、コメントしてください。

4

2 に答える 2

92

clearfixクラスのケースを取得したようです。

したがって、子divを浮動していると推測します。そのため、親divの高さは0です。floatを使用すると、親は子の高さに適応しません。

'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%;
}
于 2012-09-22T04:04:52.920 に答える
65

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

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

ダイダロスが彼のコメントで示唆したように、あなたはおそらく子divを浮かせています。もしそうなら、上の行はそれを修正します。

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

上記の行は、（疑似）要素を作成して#parentdivに挿入します。この要素は、フロートされたすべてのdivを超えてプッシュダウンされます。次に、親divは、フロートされた子を無視しますが、この疑似要素を無視しません-本来の動作をしますが、疑似要素を含むように拡張されます。さて、疑似要素はすべてのフロートされた子の下にあるので、親divが発生します。さらに良いことに、フロートされた子も「含む」ように見えます。これは本当に必要なことです。

于 2012-09-22T04:01:16.120 に答える