絶対位置決め方式: (1)親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の高さに合わせて変化します。 。親 { /*キーコード*/ 位置: 相対的; /*その他のスタイル*/ 幅: 800ピクセル; 色: #fff; フォントファミリ: "Microsoft Yahei"; テキスト配置: 中央; } (2)左側の要素の高さが最小の場合 。左 { 最小高さ: 700px; 幅: 600ピクセル; } (3)右側の要素を親要素と同じ高さにしたい場合は、絶対位置指定を使用します。topとbottomの両方を記述したくない場合は、どちらか一方を記述してからheight: 100%と記述することで同じ効果が得られます。 。右 { /*キーコード*/ 幅: 200ピクセル; 位置: 絶対; 上: 0; 右: 0; 下部: 0; /*その他のスタイル*/ 背景: #ccc; } (4)完全なサンプルコード: <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8"> <title>子要素の高さは親要素と一致しています</title> <スタイル> 。親{ 位置: 相対的; 背景: #f89; 幅: 800ピクセル; 色: #fff; フォントファミリ: "Microsoft Yahei"; テキスト配置: 中央; } 。左 { 最小高さ: 700px; 幅: 600ピクセル; } 。右 { 幅: 200ピクセル; 位置: 絶対; 上: 0; 右: 0; 下部: 0; 背景: #ccc; } </スタイル> </head> <本文> <div class="parent"> <div class="left"> 左側の高さは不確定です。親の高さは左側の高さに応じて変化し、右側もそれに応じて変化します。</div> <div class="right"> ここでの高さは親要素の高さと一致します </div> </div> </本文> </html> (5)効果 (6)ここで疑問が湧いてきます。 右側の子要素の高さが .parent を超えた場合はどうなりますか? .right-inner { 背景:ライムグリーン; 高さ: 1024px; } <div class="right"> <div class="right-inner">right の子要素の高さは 1024px なので、コンテナが壊れてしまいます。overflow:auto を .right に追加すると、オーバーフローを防ぐことができます</div> </div> 効果図は以下のとおりです。 完全なコード: <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8"> <title>子要素の高さは親要素と一致しています</title> <スタイル> 。親{ 位置: 相対的; 背景: #f89; 幅: 800ピクセル; 色: #fff; フォントファミリ: "Microsoft Yahei"; テキスト配置: 中央; } 。左 { 最小高さ: 700px; 幅: 600ピクセル; } 。右 { 幅: 200ピクセル; 位置: 絶対; 上: 0; 右: 0; 高さ: 100%; オーバーフロー:自動; 背景: #ccc; } .right-inner { 背景:ライムグリーン; 高さ: 1024px; } </スタイル> </head> <本文> <div class="parent"> <div class="left"> 左側の高さは不確定です。親の高さは左側の高さに応じて変化し、右側もそれに応じて変化します。</div> <div class="right"> <div class="right-inner">right の子要素の高さは 1024px なので、コンテナが壊れてしまいます。overflow:auto を .right に追加すると、オーバーフローを防ぐことができます</div> </div> </div> </本文> </html> (7)その他のリソース http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent CSS 子要素の高さを親要素と同じにする方法についての記事はこれで終わりです。CSS 子要素と親要素の高さについての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: MySQL InnoDB トランザクション ロック ソースコード分析
この記事では、例を使用して、MySQL インデックスがソートに与える影響を説明します。ご参考までに、...
タブ: カテゴリ + 説明タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる1. ...
目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...
インデックスの2つの主要なカテゴリ使用されるストレージエンジン: MySQL 5.7 InnoDBク...
1. 動的コンポーネント <!DOCTYPE html> <html> &l...
rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...
導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...
序文私のチームが税制モジュールを開発していたとき、計算問題、特にグリッド内の計算を解決するために時間...
Deepin 2014 のダウンロードとインストールDeepin 2014 のダウンロードとインスト...
コマンドラインでMYSQLに正常にログインでき、NavicatもMySQLに正常に接続できますが、I...
ここではCentOS7が使用されており、カーネルバージョンは [root@localhost ~]#...
ダウンロードリンク:動作環境VMware 仮想マシンの CentOS 7.6セキュアCRT Xftp...
MGR (MySQL グループ レプリケーション) は、バージョン 5.7 で追加された新しい機能...
新しい設定ファイルを作成します (たとえば、nginx インストール ディレクトリの下の conf ...
目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...