CSSコンテナーdivが高さを取得しない

116

コンテナーdivにその子の高さの最大の高さを取得させたい。子供がどのくらいの高さになるかわからdivない。JSFiddleを試してみました。コンテナdivは赤です。表示されていません。どうして？

css css-float liquid-layout

282

次のプロパティを追加します。

.c{
    ...
    overflow: hidden;
}

これにより、フローティング要素に関係なく、コンテナはコンテナ内のすべての要素の高さを尊重します。
http://jsfiddle.net/gtdfY/3/

更新

最近、私はこのトリックを必要とするプロジェクトに取り組んでいましたが、オーバーフローを表示できるようにする必要があったので、代わりに疑似要素を使用してフロートをクリアし、すべての要素でオーバーフローを許可しながら同じ効果を効果的に達成できます。

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

— ナイトファイアキャット
ソース

8

基本的に、このプロパティを追加すると、コンテナの高さで計算されないフローティングコンテナのルールが無視され、背景の描画全体に適用されます。

— Nightfirecat

4

うわー、「なに？効かない」って感じだった。しかし、私はとんでもないでしょう。きちんと動作しないと思っていました。ありがとう

— fie

1

これは本当にハックじゃないですか？私にとって、それはオーバーフローの目的を無効にします。なぜこれが正解であり、最も賛成されているのか理解できません。

— Andrew Weir 2013年

3

@AndrewWeir認めますが、これまでは、コンテナを拡張してこのサイズのフロートを正しく検討するこの方法が機能する理由が完全にわかりませんでした。よると、いくつかの情報源、目に見えるオーバーフローができるようにするから、そのレンダリングモードを変更するための要素を引き起こすことを思わないそう、そうすることで、この力の要素は、そのオーバーフローを禁止します。

— Nightfirecat

2

最初の方法は、オーバーフローを使用する方法です。2番目の方法はALSOも機能し、将来オーバーフローが発生した場合に備えて、リスクは少なくなります。私は二度賛成できればいいのに。

— Tyler Collier、

28

あなたは子供たちを浮かせています。つまり、子供たちはコンテナの前で「浮く」のです。正しい高さを取得するには、フロートを「クリア」する必要があります

div style = "clear：both"はフローティングをクリアし、コンテナに適切な高さを与えます。フロートの詳細については、http：//css.maxdesign.com.au/floatutorial/clear.htmを参照してください。

例えば。

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

— ヨエリ
ソース

これは明確です：両方。問題は浮いている子供なので、コンテナの高さの適切な解決策のようです。したがって、このアプローチはオーバーフローよりも優れているように見えます。上記の1つ。

— Ronnie Depp

このシンプルなソリューションを共有してくれた@Yoeriに感謝します。いいね！私が新しいデザインに対して同じ解決策を探しているのは、デザイン側ではなくPHP開発の視点だけに焦点を合わせた後、最後にWebレイアウトをデザインしてから6年近く経過しているためです。

— Ronnie Depp

20

それほど簡単ではありませんか？

.c {
    overflow: auto;
}

— アントニオ・ロメロ・オカ
ソース

はい、それは：Dです。ありがとう

— Alauddin Ahmed

4

最後の前にこのクリアdivを挿入してみてください </div>

<div style="clear: both; line-height: 0;"> </div>

— 風下
ソース

3

最良かつ最も防弾ソリューションを追加することです::beforeし、::afterコンテナにpseudoelements。たとえば、次のようなリストがあるとします。

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

そして、リストのすべての要素にはfloat:leftプロパティがあり、CSSに追加する必要があります。

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

またはdisplay:inline-block;、プロパティを試してみると、clearfixを追加する必要がありません。

— あがた
ソース