流体高部を作成するには？

Question

注：まだCSS & HTMLを学習していますので、この質問が「noobish」と思われる場合は、それが原因です。あなたが例を挙げることができれば、または私の質問に合わせて作られた記事は素晴らしいだろう。

div（ "background"）を作成しました。このdivには2つのdivが含まれています（ "&" right "）。

「左」&「右」divのコンテンツの量に基づいて、「背景」divの高さを拡大または縮小したいとします。

#background { 
width:100%; 
height:15em; 
background-color:#FFF; 
box-shadow: 0 0 5px #888; 
-moz-box-shadow: 0 0 5px #888; 
-webkit-box-shadow: 0 0 5px#888; 
clear:both; 
} 

私はそれが伸縮作るのかわからないので、私は現在、15emに設定し、「背景」のdivの高さを有しています。私は "100％"と "自動"に設定しようとしましたが、それらは "背景" divを消すだけです。ここで

は私の全体のHTML & CSSコードです：http://jsfiddle.net/jueRh/

Answer 1

あなたはheight値なしであなたのコンテナdivを残す場合は、それはそれのコンテンツに拡張コンテナになります。

divに一定の高さを設定し、オーバーフローしたコンテンツを展開する場合は、min-heightを使用できます。またmin-heightのみ等しいまたはenlisted browsers in this link.

EDITの上方に支持されていることに注意してください：をただし、コンテナ内float編にdiv Sを使うことになるならば、あなたはclearに適切なレンダリングのためのフロートを持っています。あなたはまた、あなたがclear INGをスキップすることができfloat代替のためのdisplay:inline-blockを使用していますが、that is also support limited.

Answer 2

設定overflow: hidden;#backgroundにしてheight:15em;宣言を削除することができます。

デモ：http://jsfiddle.net/sonic1980/jueRh/1/