Ich habe den folgenden Code, der großartig funktioniert, wenn ich meinen Inhalt zentriere, bis die vh kleiner ist als 650px . Ich habe mich gefragt, ob es einen Weg gibt, diesen Wert niemals unter 0 zu setzen, nur mit CSS calc .
Wenn Sie davon ausgehen, dass es keine Möglichkeit gibt, die von calc() berechneten Werte zu begrenzen, können Sie eine Medienabfrage verwenden, wenn max-height höchstens 650px
oder Sie können die Logik auch wiederherstellen, indem Sie die vorhandene Regel in eine min-height mediaquery
Um die allgemeine Frage zu beantworten:
Gibt es eine Möglichkeit, CSS calc () niemals zu einem negativen Wert zu machen?
Die Antwort lautet nein, weil CSS keine Möglichkeit bietet, eine Menge manuell auf einen Mindest- oder Höchstwert zu beschränken (oder zu klammern).
Ob eine Zahl oder eine Länge nativ auf einen bestimmten Bereich beschränkt ist, hängt von der Eigenschaft ab, die diesen calc() -Wert hat. Aus der Spezifikation :
Der aus einem Ausdruck resultierende Wert muss an den im Zielkontext zulässigen Bereich angeglichen werden.
Diese beiden sind äquivalent zu 'width: 0px', da Breiten unter 0px nicht erlaubt sind.
%Vor%
Beispiel: Während negative Werte für margin und z-index gültig sind, sind negative Werte für border-width , padding , height , width usw. nicht gültig. Die Besonderheiten davon sind fast immer in der Spezifikation für die jeweilige Eigenschaft definiert.
Da Sie in Ihrem Beispiel zufällig Ansichtsfenstereinheiten verwenden, können Sie Medienabfragen in Verbindung mit ihnen als demonstriert von fcderan .