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はすべてのショッピングカート機能を実装します
推薦する
jsはjQueryをカプセル化する簡単な方法とチェーン操作の詳細な説明を実装します
目次1. $(".box1").click() メソッドを実装する2. $(&q...
mysql5.7.19 winx64 インストールおよび構成方法のグラフィック チュートリアル (win10)
mysql 5.7.19 winx64のインストールチュートリアルは以下のように記録され、みんなと...
MySQL 学習のまとめ: InnoDB ストレージ エンジンのアーキテクチャ設計の予備的な理解
1. ストレージエンジン前のセクションでは、SQL 実行プランは、エグゼキュータ コンポーネントがス...
Nexus をベースに Alibaba Cloud プロキシ ウェアハウスを構成するプロセスの分析
Nexus のデフォルトのリモートリポジトリは https://repo1.maven.org/ma...
MySQLのトランザクション管理操作の詳細な説明
この記事では、MySQL のトランザクション管理操作について説明します。ご参考までに、詳細は以下の通...
MySQL マスタースレーブレプリケーションプロセスの詳細な説明
1. マスタースレーブレプリケーションとは何ですか?マスター データベースの DDL および DML...
Linux カーネル デバイス ドライバー カーネル デバッグ テクニカル ノート集
/****************** * カーネルデバッグ技術 ****************...
Pycharm2017はpython3.6とmysqlの接続を実現します
この記事では、pycharm2017でpython3.6とmysqlを接続する方法を参考までに紹介し...
MySQL 外部キー制約の一般的な操作の例 [表示、追加、変更、削除]
この記事では、例を使用して、MySQL 外部キー制約の一般的な操作について説明します。ご参考までに、...
TypeScript のクラス
目次1. 概要2. シンプルなクラスを定義する3. 継承4. public、private、prot...
全文検索とキーワードスコアリング方式のMySQL実装例
1. はじめに今日、同僚から、MySQL を使用して ElasticSearch に似た全文検索機能...
CSSスタイルとセレクターの使い方
HTML で CSS を使用する 3 つの方法: 1. インラインスタイル: 要素のスタイル属性を通...
MySQLデータベースに接続し、クエリ操作を実行するためのIDEAの完全なコード
1.まずMysqlリンク設定ページを書く パッケージ com.wretchant.fredis.me...
my.cnf (my.ini) 重要なパラメータの最適化設定手順
MyISAM ストレージエンジンMyISAM ストレージ エンジンは、書き込みよりも読み取りが多く、...
30分でReact Hooksを包括的に理解できます
目次概要1. 使用状態1.1 3つの概念に関する質問1.2 例1.3 注記2. リデューサーを使用す...