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

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 がオンになっている場合、その要素には次の特性があります。
(1)親要素の垂直余白は子要素と重ならない
(2)BFCを有効にする要素はフローティング要素によってカバーされない
(3)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でクラススタイルを使用する方法の詳細

推薦する

Vueはページに透かし効果を追加する機能を実装します

最近、あるプロジェクトに取り組んでいたとき、ページに透かし効果を追加するように依頼されました。さっそ...

Vueは画像のドラッグと並べ替えを実装します

この記事の例では、画像のドラッグと並べ替えを実装するためのVueの具体的なコードを参考までに共有して...

JavaScript 開発における標準コミットメッセージの重要性の詳細な説明

目次標準コミットメッセージの重要性コミットするコミットリント依存関係をインストールする.commit...

HTML テーブル マークアップ チュートリアル (37): 背景画像属性 BACKGROUND

テーブル ヘッダーの背景画像を設定します。任意の GIF または JPEG 画像ファイルを使用できま...

CentOS8 - bash: 文字化けとその解決方法

この状況は通常、中国語言語パックがインストールされていないか、デフォルトの言語設定に問題があるために...

ページスピードの最適化の概要

インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...

Linuxファイルを表示するコマンドの詳細な説明

Linuxファイルを表示する方法ファイルの内容を表示するコマンド: catは最初の行からコンテンツを...

JavaScript 戦略パターンを使用してフォームを検証する方法

目次概要戦略パターンを使用しないフォーム検証戦略パターンを使用して最適化する戦略パターンの利点要約す...

Raspberry Pi 4 に Ubuntu 19.10 をインストールするための詳細なチュートリアル

以前、raspbian で実行したときに opencv の一部の依存関係をパッケージ化できず、一部の...

マウスがカード上に移動したときにフローティング効果を実現する CSS の使用例

原理ホバーしたときに要素に影を設定します: box-shadow で、通常とは異なるスタイルにします...

Vue組み込みコンポーネントのキープアライブの使用例

目次1. キープアライブの使用使用例: 1. すべてのページをキャッシュする: 2. 条件に基づいて...

ドメイン名、ポート、IPに基づいてnginx仮想ホストを構築する

nginxでサポートされている仮想ホストには3つの種類があります1. ドメイン名ベースの仮想ホスティ...

選択ドロップダウンメニューのテキストを左右にスクロールするように設定する

marquee タグを使用してフォントのスクロールを設定したいです。コードは次のように記述しましたが...

React Fiber構造の作成手順

目次リアクトファイバーの作成1. 始める前に2. React.renderから始める3. 終了リアク...