CSS で子 div の高さを親コンテナの残りのスペースに合わせる方法

1. フローティング方式を使用する

効果画像:

コードは次のとおりです: (.content の高さは親要素の高さと同じ 500 ピクセルですが、フローティング要素は .content の上にあり、.content を覆っていることに注意してください。効果を確認するには、.nav の背景スタイルを background-color: rgba(0,0,0,0.1); に変更します)

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8" />
		<title>高さは親コンテナを満たします</title>
	</head>
	<スタイル>
		。親 {
			高さ: 500px;
			幅: 300ピクセル;
			境界線: 1px 赤実線;/***/
			パディング: 2px 2px;/***/
		}
		.nav {
			高さ: 100px;
			width: 100%;/*必須、フローティングを防ぐために全幅*/
			float: left;/*必須*/
			背景色: 赤;
		}
		。コンテンツ {
			height:100%;/*必須*/
			背景色: 緑;
		}
	</スタイル>
	<本文>
		<div class="parent">
			<div class="nav">
				固定高さ </div>
			<div class="content">
				適応型親コンテナ、残りのスペースを埋める </div>
		</div>
	</本文>
</html>

2. ポジショニングを使用する

コードは次のとおりです。(この方法は上記の方法の欠点がないので推奨されます)

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8" />
		<title>高さは親コンテナを満たします</title>
	</head>
	<スタイル>
		。親 {
			位置: 相対的;
			高さ: 500px;
			幅: 300ピクセル;
			境界線: 1px 赤実線;/***/
			パディング: 2px 2px;/***/
		}
		.nav {
			高さ: 100px;
			幅: 100%;
			背景色: 赤;
		}
		。コンテンツ {
			位置:絶対;
			上: 100px;
			下: 0px;
			背景色: 緑;
			幅: 100%;
		}
	</スタイル>
	<本文>
		<div class="parent">
			<div class="nav">
				固定高さ </div>
			<div class="content">
				適応型親コンテナ、残りのスペースを埋める </div>
		</div>
	</本文>
</html>

これで、CSS を使用して子 div の高さを親コンテナーの残りのスペースに合わせる方法についての記事は終了です。CSS を使用して子 div の高さを残りのスペースに合わせる方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JavaScript は 3 つの一般的な Web 効果 (オフセット、クライアント、スクロールシリーズ) を実装します。

>>: HTML ページ共通スタイル (推奨)