divを内側に浮かべて高さを伸ばす方法

103

divが内部に浮かんでいるときにその高さを伸ばすにはどうすればいいですか？私は、幅の値を定義し、隠し作品にオーバーフローを設定することを知っています。問題は、オーバーフローが見えるようにdivが必要なことです。何か案は？divを内側に浮かべて高さを伸ばす方法

2011-01-05 pedrozath

240

overflow:auto;のために働くかもしれないが、完全にラップアラウンドすること（さえ浮かべ項目）可視および外側のdivの内側にすべてのものを作りますそれら。 this exampleを参照してください。

2011-01-05 12:38:22 JakeParis

ええ、それはちょっと動作しますが、スクロールバーを生成する危険性があります..そうですか？ – pedrozath

いいえ、@pedroについては分かりません。外側のdivは、内側のdivをラップするために拡大し続ける必要があります。フィドルで試してみて、内側のdivのディメンションを増やして何が起こるか見てみましょう。 – JakeParis

すごくうれしかった、ありがとう！ @JMCCreative – Zhianc

フロートをクリアする方法は複数あります。あなたがここにいくつかを確認することができます。
http://work.arounds.org/issue/3/clearing-floats/

例えば、clear:bothを含むdiv要素であなた

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

#element { zoom:1; }

2011-01-05 12:34:52

このアプローチの利点は、 'overflow：auto;'は、要素の外側にオーバーフローするコンテンツ（フォーカスデコレーションなど）をクリップしますが、これはそうしないことです。 – Dan

オーバーフロー：私のために水平スクロールバーが自動的に作成されたため、使用できませんでした。これは完全に機能しました。 –

多くの場合、overflow: auto;で十分ですが、完了とクロスブラウザのサポートのために、すべてのブラウザで仕事をするClearfixを見てください。

は、次のスタイルとともに

<div class="clearfix"> 
    <div class="content">Content 1</div> 
    <div class="content">Content 2</div> 
</div>

.content { float:left; } clearfixなし

.clearfix { ..from link.. }

、親..次のマークアップを考えることができますdiv持っていませんそれは浮遊している子供のための高さです。 clearfixは、親に浮動小児を考慮させる。

2011-01-05 13:24:39 miphe

Clearfixは余分なマークアップです。親divにマークアップ 'overflow：auto;を与えるだけです。 – JakeParis

これを行うには、display: tableをdivに設定するのがよいと思いました。

2014-07-03 16:07:26 pedrozath

答えて