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プロジェクトをデプロイする

推薦する

Docker nginxは1つのホストを実装して複数のサイトを展開します

とあるサイトからレンタルした仮想マシンの有効期限が近づいており、更新料が200元以上かかります。Al...

HTMLの基礎知識:ウェブページの基礎知識

HTML は Hypertext Markup Language の略です。これは、実際のプレゼンテ...

Vue の匿名スロットと名前付きスロットの詳細な説明

目次1. 匿名スロット2. 名前付きスロット要約するスロット (slot) は、Vue のコンテンツ...

Vue ミックスインの使用方法とオプションのマージの詳細な説明

目次1. コンポーネントでの使用2. オプションのマージ要約する1. コンポーネントでの使用Mixi...

この記事はJavaScriptの変数とデータ型を理解するのに役立ちます

目次序文:親切なヒント:変数1. 免責事項2. 譲渡3. 2つの小さな文法上の詳細変数の命名規則なぜ...

tomcat+nginx を使用してマルチアプリケーション デプロイメントを実装するためのサンプル コード

目次マルチアプリケーションの展開1-Tomcat 構成1.1- プロジェクト構成1.2-サービス構成...

WeChatアプレットのサイレントログインとカスタムログイン状態の維持の詳細な説明

目次1. 背景2. サイレントログインとは何ですか? 3. カスタムログイン状態を維持する方法4. ...

Vueはカルーセルアニメーションを実装します

この記事では、カルーセルアニメーションを実現するためのVueの具体的なコードを例として紹介します。具...

Vue ユニットテストに関する予備調査

目次序文なぜユニットテストを導入するのですか?ユニットテストの概要テスト開発パターン1. テスト駆動...

MySQLの共通関数の概要

序文: MySQL データベースは、よく使用される集計関数、日付および文字列処理関数など、幅広い関数...

Baotaパネルを再起動すると、「-ModuleNotFoundError: No module named 'geventwebsocket'」というメッセージが表示されます。

背景:サーバーがFlaskプロジェクトをデプロイし、python3をインストールしたため、再起動時に...

JS で CSS 変数を使用する方法

JS で CSS 変数を使用する方法:export キーワードを使用して、js オブジェクトを le...

Ubuntu で .sh ファイルを実行するいくつかの方法の違いについて簡単に説明します。

序文特に bash 環境では、スクリプトの実行方法によって結果が異なります。スクリプトを実行する方法...

スクロールバーを非表示にしながらもスクロール効果を維持する純粋な CSS (モバイルと PC)

携帯モバイル ページは Chrome および Safari とのみ互換性があればよいため、カスタム ...

CocosCreator Typescriptでテトリスゲームを作る

目次1. はじめに2. 解決すべきいくつかの重要な問題3.最後に書く1. はじめに最近、Cocos ...