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でクラススタイルを使用する方法の詳細

推薦する

Linuxコマンド履歴の調整方法の詳細な説明

Linux システムの bash history コマンドは、以前に実行したコマンドを記憶し、再入力...

Alibaba Cloud Ubuntu 16.04でpptpdサービスを構築する方法

1. PPTP VPNを構築するには、ポート1723とGREプロトコルを開く必要があります。 1. ...

Ubuntu 19.10 で ssh サービスを有効にする (詳細なプロセス)

Ubuntuでsshを開くのに1時間以上かかりました。主な原因は、最初に読んだチュートリアルの手順...

MYSQL SERVER のログファイルを縮小する方法

トランザクション ログには、関連するデータベースに対する操作が記録され、データベースの回復に関連する...

MySQL のデフォルトのストレージ エンジンを変更する方法

mysql ストレージ エンジン: MySQL サーバーはモジュール スタイルを採用しており、特にス...

Prometheus+Grafanaによるnginxの監視方法を分析する

目次1. ダウンロード2. nginxとnginx-vts-exporterをインストールする3. ...

Windows での MySQL 5.7.20 のインストールと設定方法のグラフィック チュートリアル

参考までにWindowsにMySQLをインストールします。具体的な内容は次のとおりです。 1.まずM...

mysql 簡単な操作例を表示

この記事では、例を挙げて mysql show 操作について説明します。ご参考までに、詳細は以下の通...

React NativeのstartReactApplicationメソッドの簡単な分析

今回は、 RNの起動処理を整理しました。最後のstartReactApplication比較的複雑で...

JavaScript は、マウスがテーブル行を通過するときに色の識別を実装します。

この記事では、マウスがテーブルの行を通過するときにJavaScriptを使用して色ラベルを表示する方...

時間のかかるDockerエラーのトラブルシューティングプロセス記録

目次起源環境情報トラブルシューティングのプロセス要約する起源顧客は CentOS をベースにしたカス...

Vue echarts は棒グラフの動的な表示を実現します

この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...

MySQL 5.7 インストール不要の設定グラフィックチュートリアル

Mysql は人気があり、使いやすいデータベース ソフトウェアです。以下は、mysql の無料インス...

Linux システムの /etc/fstab ファイルの詳細な解釈

序文 [root@localhost ~]# cat /etc/fstab # #/etc/fsta...

シンプルなフロントエンドのページング効果を実現する js

比較的シンプルな業務のプロジェクトもありますが、フロントエンドのページングを多用します。プラグインの...