CSS の高さの崩壊問題の解決

1. 崩壊度が高い

ドキュメントフローでは、親要素の高さはデフォルトで子要素によって拡張されます。つまり、親要素の高さは子要素の高さと同じになります。ただし、子要素にフローティングが設定されている場合、子要素はドキュメントフローから完全に外れます。このとき、子要素は親要素の高さをサポートできず、親要素の高さが崩れてしまいます。

親要素の高さが縮むため、親要素の下にあるすべての要素が上に移動し、ページレイアウトが乱雑になります。
そのため、開発中の高さ崩壊の問題を回避する必要があります。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル タイプ="text/css">
    .box1{
        境界線: 10px 実線の赤;
    }
    </スタイル>
</head>
<本文>
<div class="box1">
    <div class="box2">あ</div>
</div>
</本文>
</html>

結果: 親要素 box1 の高さは、子要素 box2 a の内容によって拡張されます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル タイプ="text/css">
    .box1{
        境界線: 10px 実線の赤;
    }
    .box2{
        幅: 100ピクセル;
        高さ: 100px;
        背景色: 緑黄色;
    }

    </スタイル>
</head>
<本文>
<div class="box1">
    <div class="box2">あ</div>
</div>
</本文>
</html>

結果: 親要素の高さは、子要素の高さ 100 だけ拡大されます。

子要素に float を設定する場合:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル タイプ="text/css">
    .box1{
        境界線: 10px 実線の赤;
    }
    .box2{
        幅: 100ピクセル;
        高さ: 100px;
        背景色: 緑黄色;
        フロート: 左;
    }
    .フッター{
        高さ: 50px;
        背景色: ピンク;
    }
    </スタイル>
</head>
<本文>
<div class="box1">
    <div class="box2"></div>
</div>
<div class="フッター"></div>
</本文>
</html>

結果: 子要素はフロートし、親要素には高さがありません。フッターが上に移動します。

折りたたまれないように親要素の高さを設定します。

.box1{
        境界線: 10px 実線の赤;
        height: 100px;/* 親要素の高さを設定します*/
    }

結果：

ただし、子要素の高さが高い場合は、オーバーフローの問題が発生してしまいます。親要素の高さが固定されると、親要素の高さは子要素の高さに自動的に適応しなくなるため、この解決策は推奨されません。

  .box2{
        幅: 100ピクセル;
        高さ: 200px;
        背景色: 緑黄色;
        フロート: 左;
    }

結果：

2. 崩壊問題を解決する

W3C 標準によれば、ページ上のすべての要素には、ブロックフォーマットコンテキスト (略して BFC) と呼ばれる暗黙的な属性があります。このプロパティはオンまたはオフに設定でき、デフォルトではオフになっています。
要素の BFC がオンになっている場合、その要素には次の特性があります。
（１）親要素の垂直余白は子要素と重ならない
（２）BFCを有効にする要素はフローティング要素によってカバーされない
（３）BFCを有効にする要素にはフローティングサブ要素を含めることができる

要素の BFC を有効にする方法:

要素をフロートに設定する

この方法では親要素を拡張できますが、親要素の幅が失われます。また、この方法では下位の要素も上に移動するため、問題は解決されません。

要素を絶対位置に設定します

上記のような問題もある

要素をインラインブロックに設定する

これによって問題は解決しますが、幅が狭くなるため、お勧めできません。

要素のオーバーフローを非表示の値に設定する

推奨される方法: 親要素のオーバーフローを非表示に設定すると、副作用を最小限に抑えて BFC を有効にすることができます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル タイプ="text/css">
    .box1{
        境界線: 10px 実線の赤;
        オーバーフロー: 非表示;
    }
    .box2{
        幅: 100ピクセル;
        高さ: 100px;
        背景色: 緑黄色;
        フロート: 左;
    }
    .フッター{
        高さ: 50px;
        背景色: ピンク;
    }
    </スタイル>
</head>
<本文>
<div class="box1">
    <div class="box2"></div>
</div>
<div class="フッター"></div>
</本文>
</html>

結果：

注意: ただし、BFC は IE6 ではサポートされていません。そこでhasLayoutが導入されます。

IE6 には、BFC と同様の機能を持つ hasLayout という別の暗黙的なプロパティがあるため、IE6 ブラウザでは hasLayout をオンにすることでこの問題を解決できます。これを有効にする方法は多数ありますが、副作用が最も少ない方法は、要素のズームを 1 に設定することです。

ズームは拡大を意味し、その後に数字が続きます。記入する数字は、要素が何倍に拡大されるかを表します。

zoom:1 は要素を拡大しないことを意味しますが、このスタイルを通じて hasLayout を有効にすることができます。

ズームスタイルは IE でのみサポートされ、他のブラウザーではサポートされません。

zoom: 1;/* ie6と互換性あり*/
overflow: hidden;/* IE6以外と互換性あり*/

CSS の高さの縮小の問題の解決法に関するこの記事はこれで終わりです。CSS の高さの縮小に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: meta name="" content="の機能の詳細な説明

>>: Vueでクラススタイルを使用する方法の詳細