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

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

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

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 をよろしくお願いいたします。