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

推薦する

Vue でコミュニケーションを実装する 8 つの方法

目次1. コンポーネント通信1. Props 親コンポーネント ---> 子コンポーネント通信...

Dockerにelasticsearchとkibanaをインストールする方法

Elasticsearchは現在非常に人気があり、多くの企業が利用しているため、esを知らないと軽蔑...

MySQL 8.0.11 圧縮版のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0圧縮パッケージのインストール方法、詳細は次のとおりです知らせ:オペレーティング シ...

MySQL のフィールドにデフォルトの時間を追加する方法

日付型の違いと用途MySQL には、日付、時刻、年、日付時刻、タイムスタンプの 5 つの日付タイプが...

VMwareがwin10ホームバージョンに64ビットオペレーティングシステムをインストールできない問題を解決します

問題の説明VMware Workstationが新しい仮想マシンを作成し、64ビットオペレーティング...

開発をスピードアップできる VueUse ライブラリ 5 つ (まとめ)

目次VueUse にはどのようなユーティリティがありますか? VueUseをVueプロジェクトにイン...

ノードをMySQLデータベースに接続する際に発生する問題と解決策

今日、MySQL の新しいバージョン (8.0.21) をインストールしましたが、ノード フレームワ...

vue backtop コンポーネントを実装するための完全なコード

効果: コード: <テンプレート> <div class="back-t...

ページにスクロールバーが表示されたときに、スクロールバーがページ幅に影響しないようにする方法

本体の幅をウィンドウの幅に設定します(次のスクリプトで制御されます) $("body&qu...

VMware Esxi のルート パスワードを忘れた後に正常に取得する方法

CentOS6 インストール ディスク (任意のバージョン) を準備するか、別の pnux インスト...

MySQL システム ユーザーが開くことができるファイルの最大数に関する簡単な説明

本から学ぶことは常に浅はかで、これがさらなるダウンタイムを引き起こすことには決して気づきません......

MySQL 5.7.20 zip インストール チュートリアル

MySQL 5.7.20 zipインストール、具体的な内容は次のとおりです(1)圧縮パッケージを解凍...

Linux (Centos7) での redis5 クラスターの構築と使用方法の詳細な説明

目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...

Linux自動ログイン例の説明

インターネット上には、expect を使用して自動ログインを実現するスクリプトが多数存在しますが、明...

CentOS 6.6 ソースコードのコンパイルと MySQL 5.7.18 のインストールチュートリアルの詳細な説明

1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...