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 を有効にすることができます。 <!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="の機能の詳細な説明
Linux システムの bash history コマンドは、以前に実行したコマンドを記憶し、再入力...
1. PPTP VPNを構築するには、ポート1723とGREプロトコルを開く必要があります。 1. ...
Ubuntuでsshを開くのに1時間以上かかりました。主な原因は、最初に読んだチュートリアルの手順...
トランザクション ログには、関連するデータベースに対する操作が記録され、データベースの回復に関連する...
mysql ストレージ エンジン: MySQL サーバーはモジュール スタイルを採用しており、特にス...
目次1. ダウンロード2. nginxとnginx-vts-exporterをインストールする3. ...
参考までにWindowsにMySQLをインストールします。具体的な内容は次のとおりです。 1.まずM...
この記事では、例を挙げて mysql show 操作について説明します。ご参考までに、詳細は以下の通...
今回は、 RNの起動処理を整理しました。最後のstartReactApplication比較的複雑で...
この記事では、マウスがテーブルの行を通過するときにJavaScriptを使用して色ラベルを表示する方...
目次起源環境情報トラブルシューティングのプロセス要約する起源顧客は CentOS をベースにしたカス...
この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...
Mysql は人気があり、使いやすいデータベース ソフトウェアです。以下は、mysql の無料インス...
序文 [root@localhost ~]# cat /etc/fstab # #/etc/fsta...
比較的シンプルな業務のプロジェクトもありますが、フロントエンドのページングを多用します。プラグインの...