CSS の子要素を親要素と高い一貫性を持たせる方法
|
絶対位置決め方式: （１）親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の高さに合わせて変化します。
。親 {
/*キーコード*/
位置: 相対的;
/*その他のスタイル*/
幅: 800ピクセル;
色: #fff;
フォントファミリ: "Microsoft Yahei";
テキスト配置: 中央;
}
（２）左側の要素の高さが最小の場合
。左 {
最小高さ: 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>
（５）効果
（６）ここで疑問が湧いてきます。 右側の子要素の高さが .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 Element UIの使用時に遭遇した問題をまとめる
目次1. DateTimePickerの日付選択範囲は現在時刻とそれ以前です2. DateTimeP...
IE6/IE7/IE8/IE9/FF 向け CSS ハック (概要)
IE8.0の正式版をインストールしたので、基本的なCSS HACKをいくつかまとめてみました。We...
Vue の el-table は自動天井効果を実現します (固定をサポート)
目次序文実装のアイデア効果：使用：メインソースコード:序文多くのケースを見た結果、単純な観点からは、...
React スキャフォールディングの構築方法を学ぶ
1. フロントエンドエンジニアリングの複雑さいくつかの小さなデモ プログラムを開発するだけであれば、...
Linux または Windows 環境での pytorch のインストールと検証 (runtimeerror 問題の解決)
1. pytorch公式サイトから対応するインストールファイルをダウンロードします。 https:...
SQL GROUP BYの詳細な説明と簡単な例
GROUP BY ステートメントは、Aggregate 関数と組み合わせて使用され、1 つ以上の...
Baidu 入力メソッドが API を公開、自由に移植して使用できると主張
百度入力方式の担当者は、百度入力方式のオープンAPIの最大の利点は操作が便利であることであり、プラッ...
ポップアップウィンドウの上下中央左右と透明な背景のロックウィンドウ効果を実現する CSS
クリック後にポップアップボックスを実現し、上下左右に中央揃えし、灰色の透明マスクを追加してウィンドウ...
HttpとHttpsの両方をサポートするNginxの詳細な設定
最近の Web サイトでは Https をサポートすることがほぼ標準機能となっており、Nginx は...
Windows 10 システムで Mysql8.0.13 のルート パスワードを忘れる方法
1. まずmysqlサービスを停止します管理者としてCMDを開いて閉じるか、Windowsサービスペ...
表 td 画像水平および垂直中央揃えコード
HTMLコード:コードをコピーコードは次のとおりです。 <td align="cen...
JavaScript における一般的な配列操作
目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....
JavaScript のガベージコレクションの仕組みの詳細な説明
目次ガベージコレクション (GC) はなぜ必要なのでしょうか?ガベージコレクションとは廃棄物の発生ガ...
CSSはウェブページの列の左側が固定されていることを認識し、一番下までスクロールすると自動的に位置を調整します。
プレビューアドレス: https://ovsexia.gitee.io/leftfixed/ htm...
計算プロパティとリスナーの詳細
目次1. 計算されたプロパティ1.1 基本的な例1.2 計算プロパティキャッシュとメソッド1.3 計...