Ich arbeite an einem Projekt, bei dem der ehemalige Entwickler Folgendes verwendet hat:
.main-sidebar {
height: calc(100vh);
}
Ich habe keine Möglichkeit mehr, ihn/sie zu kontaktieren, und ich würde gerne verstehen, was der Unterschied (falls vorhanden) zwischen den beiden Methoden ist.
(Ist das der richtige Ort für diese Frage?)
Anukul Limpanasil
VH
height: 100vh; bedeutet, dass die Höhe dieses Elements 100 % der Höhe des Ansichtsfensters entspricht.
Beispiel:
height: 50vh;
Wenn Ihre Bildschirmhöhe 1000 Pixel beträgt, beträgt Ihre Elementhöhe 500 Pixel (50 % von 1000 Pixel).
KALK
height: calc(100% - 100px); berechnet die Größe des Elements anhand des Werts des Elements.
Beispiel:
height: calc(100% - 100px);
Wenn Ihre Bildschirmhöhe 1000 Pixel beträgt, entspricht Ihre Elementhöhe 900 Pixel (100 % von 1000 Pixel und minus 100 Pixel).
*Ich denke, Ihr ehemaliger Entwickler musste nicht verwenden calc() wenn er/sie keinen Wert berechnen wollte.
Es gibt keinen Unterschied, da jederzeit der Ausdruck calc(100vh) berechnet wird, endet es immer 100vh.
Maulik Pipaliya Joyy
Mit der CSS-Funktion calc() können Sie Berechnungen durchführen, wenn Sie CSS-Eigenschaftswerte angeben
Sie können dies verweisen
Weg
(Der Grund, warum der ehemalige Entwickler dies verwendet hat, könnte sein, dass er es herkömmlicherweise überall verwendet und es einfacher wäre, Berechnungen nachträglich hinzuzufügen.)
Ich wette, der ursprüngliche Wert war so etwas wie calc(100vh – 60px), später entfernt -60px
– Russel
27. Juli 2020 um 16:20 Uhr
Dem stimme ich vollkommen zu, Russell. Höchstwahrscheinlich hätte das so sein sollen! :p
– Maulik Pipaliya Joyy
31. Juli 2020 um 3:11 Uhr
1+ für die Bereitstellung eines Links zu einem Beispiel, das die Dinge sehr klar macht.
– Jakob
16. November 2021 um 12:47 Uhr
Grundsätzlich erlaubt die Funktion calc() mathematische Ausdrücke mit Addition (+), Subtraktion (-), Multiplikation
und Division (/), die als Komponentenwerte verwendet werden sollen.
In Ihrem Fall sind beide gleich, da Sie keine Berechnung verwendet haben. Sie können also die Höhe verwenden: 100vh
Ein häufiger Anwendungsfall ist, dass er zuerst den Header oder ein anderes Element subtrahiert. kalk(100vh – 80px).
Wollen Sie damit sagen, dass dies ein Fall von Fahrlässigkeit war, bei dem “- 80px” entfernt wurde, aber nicht der gesamte calc() -Ausdruck?
– BoltClock
23. Oktober 2018 um 5:07 Uhr
Ich stimme @”Dragomir Dan” zu
– Russel
Benutzeravatar von Elikill58
calc() Elikill58
wird nur verwendet, um den Wert in der Klammer zu berechnen. calc(100vh - 60px);
Beispiel Höhe:
Hier wird die Höhe um 60 Pixel in der Höhe des Ansichtsfensters geringer sein.
Hinweis: Denken Sie daran, Leerzeichen vor dem Operator und nach dem Operator zu verwenden, wenn es nicht funktioniert.
Wollen Sie damit sagen, dass dies ein Fall von Fahrlässigkeit war, bei dem “- 80px” entfernt wurde, aber nicht der gesamte calc() -Ausdruck?
– BoltClock
23. Oktober 2018 um 5:07 Uhr
Ich stimme @”Dragomir Dan” zu
– Russel
Mögliches Duplikat von Unnötige Verwendung von calc() im MDN-Beispiel? (Dies ist kein MDN-Beispiel, aber es bietet die gleiche Verwendung von calc() mit nur einem Wert)
– BoltClock
23. Oktober 2018 um 4:50 Uhr
„(Ist dies der richtige Ort, um diese Frage zu stellen?)“ Ja, keine Sorge.
– BoltClock
23. Oktober 2018 um 4:51 Uhr