CSS verwendet calc(), um die aktuell sichtbare Bildschirmhöhe zu ermitteln

Schauen wir uns zunächst die relativen Längeneinheiten von CSS3 an (siehe ausführliches Tutorial):

Relative Längeneinheiten geben die Eigenschaft einer Länge im Verhältnis zu einer anderen Länge an. Relative Längen sind auf unterschiedliche Geräte anwendbarer.

Es ist ersichtlich, dass wir durch vh / vw die aktuelle Bildschirmfensterbreite ermitteln können. Durch Berechnen dieser Höhe in CSS kann die Höhe des Div automatisch auf die Bildschirmhöhe erweitert werden. Um diese Höhe zu berechnen, können Sie die Funktion calc() von CSS3 verwenden (siehe ausführliches Tutorial):

Mit der Funktion calc() wird der Längenwert dynamisch berechnet.

• Dabei ist zu beachten, dass vor und nach dem Operator ein Leerzeichen erforderlich ist, Beispiel: width: calc(100% - 10px);
• Jeder Längenwert kann mit der Funktion calc() berechnet werden.
• Die Funktion calc() unterstützt die Operationen "+", "-", "*", "/".
• Die Funktion calc() verwendet Standardregeln für die Priorität mathematischer Operationen.

Stellen Sie also einfach die Höhe des Div auf calc(100vh) ein, 100vh = 100 % der Fensterhöhe, Beispiel:

div {
  Breite: 100 %;
  Höhe: berechnet (100vh);
}

Es ist zu beachten, dass diese Methode für die Höhe der Webseite geeignet ist, die der aktuellen Bildschirmfensterhöhe entspricht, und dass je nach tatsächlichem Bedarf möglicherweise immer noch JS erforderlich ist.

Dies ist das Ende dieses Artikels über die Verwendung von calc() in CSS, um die aktuell sichtbare Bildschirmhöhe zu ermitteln. Weitere Informationen zur Verwendung von calc() in CSS, um die aktuelle Bildschirmhöhe zu ermitteln, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!