CSSはボックスコンテナ（div）の高さを常に100%に設定します。
|
序文 ブラウザをどのようにズームしても、ボックス コンテナーの高さを常に 100% に保つ必要がある場合があります。一部の Web サイトのサイドバーと同様ですが、ボックス コンテナーの高さを 100% に直接設定しても機能しません。 デモ 要素のパーセンテージ height: 100%; を機能させるには、そのすべての親要素の高さに有効な値を設定する必要があります。以下のデモを例に挙げます。div の親要素は body と html です。したがって、親要素と要素自体の両方の高さを 100% に設定するだけです。 <!DOCTYPE html> <html> <ヘッド> <title>ドキュメント</title> </head> <本文> <div> の高さを 100% にして、好きなように拡大縮小できるようにしたいです。 </div> </本文> </html> CS: ...
html、本文、div{
高さ:100%;
}
/* div にスタイルを追加するだけです */
div{
背景:赤;
幅:200px;
}
効果：
CSS でボックス コンテナー (div) の高さを常に 100% に設定する方法についてはこれで終わりです。div の高さを常に 100% に設定する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: Web デザイナーにはどのような知識体系が必要ですか?
>>: jQueryはすべてのショッピングカート機能を実装します
推薦する
HBuilderX で Tomcat 外部サーバーを設定して、JSP インターフェイスを表示および編集する方法の詳細な説明
1. 最初の方法は、ローカルのTomcatを起動してJSPを表示することです。 tomcatのweb...
DockerにMinIOをインストールするための詳細な手順
目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...
LinuxにComposerをインストールする方法
1. インストールスクリプト（composer-setup.php）を現在のディレクトリにダウンロー...
Dockerfile を使用して Docker でイメージを構築する方法
イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...
div 内の img と span の垂直方向の中央揃えの問題について
以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピー<htm...
Vueはドラッグプログレスバーを実装します
この記事では、ドラッグプログレスバーを実現するためのVueの具体的なコードを例として紹介します。具体...
MySQL 5.7 のキーワードと予約語の詳細な説明
序文MySQL と Oracle のキーワードはまったく同じではありません。Oracle データベー...
Alibaba Cloud Server Ubuntu 設定チュートリアル
Alibaba Cloud のカスタム Ubuntu イメージのインポートには、OSS スナップショ...
強くお勧めします! Vue 3.2 でシンタックスシュガーを設定する
目次前の1. セットアップ構文シュガーとは何か2. セットアップコンポーネントを使用して自動的に登録...
SQLで同じフィールドの異なる値のデータ統計を実行する
適用シナリオ: シールのさまざまな状態に応じて、さまざまな状態のシールの数をカウントする必要がありま...
Node+socketでシンプルなチャットルーム機能を実現
この記事では、参考までに、シンプルなチャットルームを実装するためのnode+socketの具体的なコ...
MySQLインデックスを追加する3つの原則を簡単に理解する
1. インデックスの重要性インデックスは、列に特定の値を持つ行をすばやく見つけるために使用されます。...
React のグローバル状態管理の 3 つの基本メカニズムの調査
目次序文小道具コンテクスト州要約する序文最新のフロントエンド フレームワークはすべて、コンポーネント...
Vueデータ監視の原理の詳細な説明
目次1. はじめにII. 監視対象2.1 なぜオブジェクトを監視する必要があるのですか? 2.2 デ...
JavaScript の非同期処理で待機時間を節約できますか?
JavaScriptで非同期実行の結果を同期的に取得するには、 for ループ内でawaitを使用...