青の div にコンテンツを追加するときに、緑の div の高さを滑らかにしようとしています。赤の div は正常に機能しますが、緑の div は機能しません。
したがって、blu div にコンテンツを追加するときは、緑の div を赤の div と同じくらい流動的にしたいと考えています。ここにコードがありますhttp://jsbin.com/ivobav/1/edit
青の div にコンテンツを追加するときに、緑の div の高さを滑らかにしようとしています。赤の div は正常に機能しますが、緑の div は機能しません。
したがって、blu div にコンテンツを追加するときは、緑の div を赤の div と同じくらい流動的にしたいと考えています。ここにコードがありますhttp://jsbin.com/ivobav/1/edit
これは、フロートの子に合わせて親が伸びないために発生します。この問題を回避するには、次のいずれかを実行できます。
<div style="clear:both"></div>
親コンテナの最後の要素として同等のものを挿入する編集:より完全な説明については、http://www.quirksmode.org/css/clearing.htmlをご覧ください。マイクの答えはそれを行うための最良の方法ですが、残念ながらすべての場合に機能するとは限りません. これは人々が解決策を考え出そうとした問題のように見えますが、実際にはバグではなく、仕様であることに注意してください。フロートに合わせて要素を引き伸ばすために、新しい標準 CSS プロパティを導入するよう誰かに指示してください.. .
ここでは複数のことが行われています。まず、緑色の div で流動的な高さが必要な場合height: 90%
は、CSS から削除する必要があります。これにより、緑色の div が消えることに気付くでしょう (相対的に配置されたコンテンツが含まれていないため)。
緑の div に何かを入力すると、それが大きくなることがわかります。ここで、赤い div を緑の div 内にネストする必要があると想定しています。これを行うには、赤い div の絶対位置を削除する必要があります。
これを行うと、赤い div が消えます。これは、青い div がその中に浮いているためです。つまり、青い div を保持するために成長しません。したがって、赤い div に追加overflow: auto;
するだけで、必要なものが得られます。
ここで結果を参照してください。