CSSはcalc()を使用して現在の表示画面の高さを取得します

CSSはcalc()を使用して現在の表示画面の高さを取得します

まず、CSS3 の相対的な長さの単位を見てみましょう (詳細なチュートリアルを参照してください)。

相対的な長さの単位は、ある長さの別の長さに対する相対的な特性を指定します。相対的な長さは、さまざまなデバイスに適しています。

それらこれは、現在の要素で使用されているフォントに対する相対的なサイズを記述するため、相対的な長さの単位でもあります。一般的なブラウザのデフォルトのフォント サイズは 16 ピクセルなので、2em == 32 ピクセルになります。
英語の文字xの高さによって異なります
ch数字0の幅
レムルート要素のフォントサイズ (html)
フォルクスワーゲン視点幅、視点幅、1vw = 視点幅の 1%
視点の高さ、ウィンドウの高さ、1vh = ウィンドウの高さの 1%
vmin vw と vh のうち小さい方。
最高vw と vh のうち大きい方。

vh / vwを通じて現在の画面ウィンドウの幅を取得できることがわかります。そのため、CSS ではこの高さを計算することで、div の高さを画面の高さまで自動的に拡張できます。この高さを計算するには、CSS3 のcalc()関数を使用できます (詳細なチュートリアルを参照してください)。

calc() 関数は長さの値を動的に計算するために使用されます。

  • 演算子の前後にスペースが必要であることに注意してください。例: width: calc(100% - 10px);
  • 任意の長さの値は calc() 関数を使用して計算できます。
  • calc() 関数は、「+」、「-」、「*」、「/」演算をサポートします。
  • calc() 関数は標準的な数学演算の優先順位規則を使用します。

したがって、 div高さをcalc(100vh)設定するだけです。100vh = ウィンドウの高さの 100%、例:

div {
  幅: 100%;
  高さ: calc(100vh);
}

この方法は、Web ページの高さが現在の画面ウィンドウの高さに等しい場合に適しており、実際のニーズに応じて JS が必要になる場合があることに注意してください。

CSS で calc() を使用して現在の画面の高さを取得する方法についての記事はこれで終わりです。CSS で calc() を使用して現在の画面の高さを取得する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  マインドマップを使って4つの側面からWeb標準の価値を議論する

>>:  フォーム要素の簡単な実装コードでは登録を例に挙げています

推薦する

Tomcat プロセスの CPU 使用率が高い場合のトラブルシューティング記録を記録する

この記事では主にTomcatプロセスを記録し、TCP接続が多すぎることによるCPU使用率の過剰のトラ...

Linuxはiptablesを使用して複数のIPからのサーバーへのアクセスを制限します

序文Linux カーネルでは、netfilter は、パケット フィルタリング、ネットワーク アドレ...

MySQL における Datetime と Timestamp の使用の概要

目次1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか? 2. TIMESTAMP...

MySQL 8.0.11 Mac 用インストール ガイド

MACはmysql8.0をインストールします。具体的な内容は次のとおりです。 1. ダウンロードアド...

Windows Server 2016 リモート デスクトップ サービスの構成とライセンスのアクティブ化 (2 ユーザー)

Server 2016 のリモート デスクトップ接続のデフォルト数は 2 ユーザーです。2 人以上...

マウスの尾行効果を実現する JavaScript

マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成された...

よく使用される入力テキストボックスの内容は自動的に垂直方向に中央揃えされ、クリックするとデフォルトのプロンプトテキストは空になります。

3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...

HTML テーブルタグチュートリアル (3): 幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、テーブルの幅と高さはコンテンツに応じて自動的に調整されます。テーブルの幅と高さを手動...

MySQL のロードバランサーとして nginx を使用する方法

注意: nginxのバージョンは1.9以上である必要があります。nginxをコンパイルするときに、-...

Vueアイコンセレクターのサンプルコード

出典: http://www.ruoyi.vip/ 'vue' から Vue をイン...

CSS マージンの重複とその防止方法

2 つ以上のブロックレベル ボックスの垂直に隣接するエッジが重なり合っています。結果として得られる境...

awk でのループの使用

同じコマンドを複数回実行するさまざまな種類のループについて学習しましょう。 awk スクリプトには、...

Linux サーバーに埋め込まれた ddgs および qW3xT.2 マイニング ウイルスの対処の実践記録

序文仮想通貨の狂気的な投機により、マイニングウイルスは犯罪者が最も頻繁に使用する攻撃方法の 1 つに...

LinuxでDHCPサーバーを構築する方法

目次1. 基礎知識: 2. DHCPサーバーの設定: 1. サーバーのIPを確認する2. DHCP ...

mysqlタイムスタンプの使用

序文:タイムスタンプ フィールドは、MySQL でよく使用されます。たとえば、データ行が作成または変...