divの適応高さは残りの高さを自動的に埋めます

divの適応高さは残りの高さを自動的に埋めます

シナリオ 1:

HTML:

<div class="outer">
    <div class="A">ヘッダー DIV </div>
    <div class="B">下の DIV</div>
</div>

CS: ...

html,
本文 { 高さ: 100%; パディング: 0; マージン: 0; }
.outer { 高さ: 100%; パディング: 100px 0 0; ボックスのサイズ設定: ボーダーボックス; 位置: 相対; }
.A { 高さ: 100px; 背景: #BBE8F2; 位置: 絶対; 上: 0; 左: 0; 幅: 100%; }
.B { 高さ: 100%; 背景: #D9C666; }

効果:

シナリオ2:

HTML:

<div class="outer">
    <div class="A">ヘッダー DIV</div>
    <div class="B">下の DIV</div>
</div>

CS: ...

html,
本文 { 高さ: 100%; パディング: 0; マージン: 0; }
.outer { 高さ: 100%; パディング: 100px 0 0; ボックスのサイズ: ボーダーボックス; }
.A { 高さ: 100px; 余白: -100px 0 0; 背景: #BBE8F2; }
.B { 高さ: 100%; 背景: #D9C666; }

効果:

残りの高さを自動的に埋める div 適応高さに関するこの記事はこれで終わりです。より関連性の高い div 適応高さのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<:  ポップアップはすべて不正なものではありません。ウェブサイトのポップアップをデザインするためのヒント

>>:  LinuxサーバーにVueプロジェクトをデプロイする

推薦する

MySQL インポートおよびエクスポートのバックアップの詳細

目次1. MySQLのバックアップタイプの詳細な説明1. バックアップがデータベースに与える影響に基...

ウィンドウ環境設定Mysql 5.7.21 windowx64.zip無料インストール版チュートリアル詳細説明

1. 公式サイトのmysqlダウンロードページからmysql-5.7.21-windowx64.zi...

自動行折り返し機能付き CSS Flex レイアウトのサンプル コード

フレックス コンテナーを作成するには、要素に display: flex プロパティを追加するだけで...

Windows 10 で MySQL をダウンロードするための詳細なチュートリアル

MySQL のバージョンは、Enterprise Edition と Community Editi...

ビジネス HTML メール作成に関する提案

許可ベースの電子メール マーケティングにより、マーケティングとプロモーションのコストを大幅に削減でき...

node.js の require メソッドの読み込みルールの詳細な説明

require メソッドの読み込みルールキャッシュからの読み込みを優先するコアモジュールパス形式のモ...

MySQL シリーズ 4 SQL 構文

目次チュートリアルシリーズ1. SQL言語の紹介と仕様2. データベース操作1. ライブラリを作成す...

mysql バッチで大量のデータを削除する

mysql バッチで大量のデータを削除する1000万件のレコードを持つテーブル(syslogs)があ...

Web プロジェクト開発における 2 つのトークン理由とサンプル コードの分析

目次質問:プロジェクトには 2 つのトークンがあり、1 つは有効期間が 2 時間 (ショート トーク...

カルーセル効果を実現するためのネイティブJavaScript+CSS

この記事では、参考までに、カルーセル効果の具体的なコードをJavaScript+CSSを使用して実装...

MySql インデックスの詳細な紹介と正しい使用方法

MySql インデックスの詳細な紹介と正しい使用方法1. はじめに:インデックスはクエリ速度に重大な...

Dockerはコンテナを通じてイメージを生成し、詳細にDockerCommitを送信します

目次ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを...

MySQL での and or クエリの優先度分析

これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...

HTTPSの最も優れた説明

皆さんおはようございます。しばらく記事を更新していませんでした。実は、私は流行中に1か月以上家にいて...

ノードにおけるhttpモジュールの使用と実行プロセス

ノードにおけるhttpの役割は何ですか? httpモジュールの役割は、サーバーの作成と記述を支援する...