css - CSSの親子の高さ

Question

これらのコードスニペットに問題があります。

CSS：

#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

HTML：

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
</div>

左の高さは80px、右の高さは150pxです。http://img408.imageshack.us/img408/9978/dream.th.jpg 上記のIEのスクリーンショットは、IEを使用すると、これらのスニペットが完全に機能します。しかし、他のブラウザ（opera、FF、Safari、Chrome）を使用すると、次のようになります：http: //img408.imageshack.us/img408/869/fact.th.jpg

これはクールではありません…親（#wrapper）要素の高さで、2つの子の高さを大きくしたいと思います。

score 2 · Accepted Answer

CSS

#wrapper:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;}

score 1 · Accepted Answer

これはIEのバグです。

フロートを含むことは、この動作が見られる理由を説明しますが、フロートを含む方法は、マークアップを追加するよりも優れたソリューションを提供します。

score 0 · Accepted Answer

迅速な回答をありがとうDavid。あなたが書いたすべてのコンテンツ（2つのリンク）を読んだわけではありませんが、2番目のリンクで解決策に出くわしました。「clear：both;」を使用して、追加のdivを追加しました。コンテナに、そしてそれは働いています！ありがとう。マットボール：ありがとう、でもこれをダイナミックに成長させたい

score 0 · Accepted Answer

高さが固定されていない（またはその高さが含まれているdivの最大高さよりも小さい）コンテナに2つのdivが浮かんでいる場合、コンテナはピクセルの線で折りたたまれ、浮いているdivはコンテナをオーバーフローします。

コンテナに2つのdivを強制的に含めるには、コンテナを閉じる前に両方のフロートをクリアする必要があります。言い換えると ....

CSS

<style>
#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

.clearer{ clear: both;}
</style>

HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div class="clearer"></div>
</div>

score 0 · Accepted Answer

親のオーバーフロースタイルを表示以外に設定するだけで、子コンテンツが折り返されます。

score 0 · Accepted Answer

私が見つけた最善の解決策は、上記のRodrigoと似ていますが、コンテンツにスペース文字は必要ありません（したがって、フォントサイズも指定する必要はありません）。クラスにすると、ラッパーだけでなく、任意のコンテナブロックに適用できます。（IDのスタイルを設定しないのが最善だと思いますが、それは別の質問です。）

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
*:first-child+html .clearfix { /* Optional fix for IE7 */
    zoom: 1; 
}

css - CSSの親子の高さ

6 に答える 6

Related

Reference