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

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 ページ共通スタイル (推奨)

推薦する

MySQLでグローバル変数とセッション変数を設定する2つの方法の詳細な説明

1. MySQL でグローバル変数を変更するには 2 つの方法があります。方法 1: my.ini ...

JavaScriptプロトタイプチェーンの詳細な説明

目次1. コンストラクタとインスタンス2. プロパティプロトタイプ3. プロパティ __proto_...

JavaScript をスリープまたは待機させる方法

目次概要setTimeout() の確認スリープ関数の書き方シンプルな選択ループで実行されますか?要...

HTML 5 スタイルシートのリセット

この CSS リセットは、Eric Meyers の CSS リセットに基づいて変更されており、特に...

ページスピードの最適化の概要

インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...

単一行関数と文字計算日付プロセス制御を説明する MySQL の例

目次1. キャラクター機能1. ケースコントロール機能2. キャラクターコントロール機能2. 数学関...

Zabbixは複数のmysqlプロセスの監視を実装します

1 つのサーバー上で 3 つの MySQL インスタンス プロセスが開始され、それぞれ異なるポート ...

MySQL よく使われる関数の詳細な概要

目次MySQL 共通関数1. 数値関数文字列関数3. 時間機能4. システム機能5. 集計関数MyS...

Docker プルタイムアウトの解決策

最近、Docker イメージのプルが非常に不安定です。遅く、タイムアウトすることがよくあります。 x...

Ubuntu 18.04 Server に静的 IP を設定する方法

1. 背景Netplan は、Ubuntu システムのネットワーク設定を簡単に管理および構成できるよ...

Dockerfile を使用して Java ランタイム環境のミラーを作成する方法

現在の環境は次のとおりです。セントロス7.5 docker-ce 18.06.1-ce 1. まずc...

MySQL 結合クエリ構文と例

接続クエリ:これは、2 つのクエリ (またはテーブル) の各行をペアで接続した結果です。つまり、1 ...

And キーワードを使用した MySQL の複数条件クエリ ステートメント

AND キーワードを使用した MySQL 複数条件クエリ。MySQL では、AND キーワードを使用...

React+Koa によるファイルアップロードの実装例

目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...

Tomcat のプレースホルダーによるポート設定方法 (パラメータ指定方式)

仕事で必要になったため、インターネットで多くの情報を見つけましたが、それらはすべてコピーアンドペース...