Heim >Web-Frontend >CSS-Tutorial >Wie kann ich die Höhe eines Containers in CSS auf einen Prozentsatz minus einem festen Pixelwert festlegen?
Wie kann ich die Höhe eines Containers in CSS auf einen Prozentsatz minus einem festen Pixelwert festlegen?
- Susan SarandonOriginal
- 2024-12-17 16:19:10988Durchsuche
Containerhöhe als Prozentsatz minus einem festen Wert festlegen
Um die Konsistenz auf Ihrer gesamten Website aufrechtzuerhalten und unnötiges Styling zu reduzieren, können wiederverwendbare CSS-Klassen von Vorteil sein. Bei der Standardisierung bestimmter Elemente können jedoch Herausforderungen auftreten, z. B. beim Festlegen der Höhe eines Containerelements als Prozentsatz seines übergeordneten Containers abzüglich eines bestimmten Pixelwerts.
Sie haben einen Container
- ) darin. Während die Höhe der Kopfzeile auf 18 Pixel festgelegt ist, sollte sich die Höhe der Liste dynamisch anpassen, um den verbleibenden Platz im Container auszufüllen. Das Problem entsteht, wenn Sie die Höhe der Liste als „100 % minus 18 Pixel“ angeben müssen.
Um dies zu erreichen, können Sie die Funktion calc() verwenden:
height: calc(100% - 18px);
Diese Funktion ermöglicht Sie können mathematische Berechnungen innerhalb von CSS durchführen. In diesem Fall werden 18 Pixel von 100 % abgezogen, um die Höhe der Liste zu bestimmen.
Beachten Sie, dass Sie bei älteren Browsern, die die CSS3-Funktion calc() nicht unterstützen, möglicherweise herstellerspezifische Versionen als implementieren müssen na ja:
/* Firefox */ height: -moz-calc(100% - 18px); /* WebKit */ height: -webkit-calc(100% - 18px); /* Opera */ height: -o-calc(100% - 18px); /* Standard */ height: calc(100% - 18px);
Das obige ist der detaillierte Inhalt vonWie kann ich die Höhe eines Containers in CSS auf einen Prozentsatz minus einem festen Pixelwert festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!