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はすべてのショッピングカート機能を実装します
推薦する
div 要素に終了タグがないため、Web ページを開くことができません
最初は速度の問題だと思ったので、その後、すべての画像リンク リクエストをクロスサイト接続ではなくサイ...
Ubuntu16.04 インストール mysql5.7.22 グラフィックチュートリアル
VMware12.0+Ubuntu16.04+MySQL5.7.22 インストールチュートリアルの詳...
Vueルーティング相対パスジャンプメソッド
目次Vueルーティング相対パスジャンプ1. 属性の追加2.router.resolveメソッドVue...
Linux システムで IPv6 をサポートするように Nginx を設定する方法
1. 既存のnginxがipv6をサポートしているかどうかを確認する既存の nginx が ipv6...
js ドラッグ アンド ドロップ テーブルでコンテンツ計算を実現する
この記事の例では、コンテンツの計算を実現するためのjsドラッグアンドドロップテーブルの具体的なコード...
SQL Server データベース エラー 5123 の解決方法
なぜなら、SQL Server 2005 に基づくデータベース チュートリアルがあり、そこで使用され...
iframe の多層ネスト、無制限のネスト、高度に適応したソリューション
ページ A、B、C の 3 つがあります。ページ A にはページ B が含まれ、ページ B にはペー...
ウェブページ内でウェブテーブルやdivレイヤーが引き伸ばされる問題の解決策
<br />Web ページをデザインするときには、いつも不快なことに遭遇します。最も一般...
Windows で virtualenv を使用して仮想環境を作成する方法 (2 つの方法)
オペレーティング システム: windows10_x64 Python バージョン: 3.6.8仮想...
MySQLデータベースでスロークエリログを有効にする方法の詳細な説明
データベースはスロークエリログを有効にします設定ファイルを変更する設定ファイルmy.iniに次の2つ...
CSS3セレクターの新機能の実装
目次基本的なセレクタ拡張属性セレクタ疑似クラスと疑似要素セレクター基本的なセレクタ拡張1. 子要素セ...
JavaScript キャンバスはマウスの動きに合わせてボールを動かすことを実装します
この記事の例では、マウスに従ってボールを動かすjsの具体的なコードを参考までに共有しています。具体的...
MySQL の削除に基づく構文エイリアスの問題
目次MySQL 削除構文エイリアスの問題mysql の delete ステートメントでエイリアスを使...
Struts2 ジャンプ後に CSS と JS が無効になる問題の解決策のアイデアと実装手順
struts2 アクションの実行後にジャンプした jsp が表示されると、css が機能しません。問...
Docker で PostgreSQL を実行し、いくつかの接続ツールを推奨する
1 はじめに PostgreSQL は、非常に充実した機能を備えたフリーソフトウェアのオブジェクトリ...