CSS の子要素を親要素と高い一貫性を持たせる方法

CSS の子要素を親要素と高い一貫性を持たせる方法

絶対位置決め方式:

(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 トランザクション ロック ソースコード分析

>>:  Vue ページでよりエレガントに画像を紹介する方法

推薦する

MySQL インデックスがソートに与える影響の分析例

この記事では、例を使用して、MySQL インデックスがソートに与える影響を説明します。ご参考までに、...

タブバーのいくつかの実装方法(推奨)

タブ: カテゴリ + 説明タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる1. ...

Vue で動的なスタイルを実現するためのさまざまな方法のまとめ

目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...

インデックスとテーブルリターンをカバーするMySQLの使い方

インデックスの2つの主要なカテゴリ使用されるストレージエンジン: MySQL 5.7 InnoDBク...

Vue の動的コンポーネントと非同期コンポーネントの詳細な理解

1. 動的コンポーネント <!DOCTYPE html> <html> &l...

Linux で MySQL データベースのデータ ファイル パスを変更する手順

rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...

JSはビデオの再生速度を制御するための簡単なサンプルコードを実装します

導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...

ハードコーディングに別れを告げ、フロントエンドテーブルがインスタンスコードを自動的に計算できるようにします。

序文私のチームが税制モジュールを開発していたとき、計算問題、特にグリッド内の計算を解決するために時間...

deepin 2014 システムに MySQL データベースをインストールする方法

Deepin 2014 のダウンロードとインストールDeepin 2014 のダウンロードとインスト...

IDEA が MySQL ポート番号占有に接続できない問題の解決方法

コマンドラインでMYSQLに正常にログインでき、NavicatもMySQLに正常に接続できますが、I...

Dockerのyumソースの設定とCentOS7へのインストールの詳細な説明

ここではCentOS7が使用されており、カーネルバージョンは [root@localhost ~]#...

Linux オペレーティング システムに Apache サービスをインストールする方法

ダウンロードリンク:動作環境VMware 仮想マシンの CentOS 7.6セキュアCRT Xftp...

MySQL MGR の利点は何ですか?

MGR (MySQL グループ レプリケーション) は、バージョン 5.7 で追加された新しい機能...

nginx アンチホットリンクおよびアンチクローラー設定の詳細な説明

新しい設定ファイルを作成します (たとえば、nginx インストール ディレクトリの下の conf ...

nginxとIISで使用できるSSL証明書を作成する

目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...