Wie kann ich in CSS die Höhe oder Breite eines Elements als Prozentsatz abzüglich eines festen Pixelwerts festlegen?-CSS-Tutorial-php.cn

Wie kann ich in CSS die Höhe oder Breite eines Elements als Prozentsatz abzüglich eines festen Pixelwerts festlegen?

Linda Hamilton

Freigeben： 2025-01-03 01:25:39

Original

874 Leute haben es durchsucht

How Can I Set an Element's Height or Width as a Percentage Minus a Fixed Pixel Value in CSS?

Breite/Höhe als Prozentsatz minus Pixel festlegen

Eine häufige Herausforderung in CSS besteht darin, die Höhe oder Breite eines Elements als Prozentsatz seines Containers minus einem festen Wert anzugeben. Stellen Sie sich das folgende Szenario vor:

Sie haben einen Container

mit unbekannter Höhe und einem Header

darin. Unterhalb der Kopfzeile soll eine ungeordnete Liste den verbleibenden Platz einnehmen, mit einer bekannten Kopfzeilenhöhe von 18 Pixel. Wie können Sie die Höhe der Liste dynamisch als „100 % minus 18 Pixel“ angeben?

Lösung

Die Lösung liegt in der Verwendung der calc()-Funktion:

height: calc(100% - 18px);

Nach dem Login kopieren

Dies Ausdruck berechnet die Höhe durch Subtrahieren des bekannten festen Werts (18 Pixel), wodurch die Liste erweitert werden kann, um den verbleibenden Platz im zu füllen Container.

Browserkompatibilität

Während calc() weithin unterstützt wird, erfordern einige ältere Browser herstellerspezifische Versionen:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);

Nach dem Login kopieren

Bedenken Sie für eine vollständige browserübergreifende Kompatibilität Verwendung aller Versionen zusammen mit der Standardsyntax am Ende:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS die Höhe oder Breite eines Elements als Prozentsatz abzüglich eines festen Pixelwerts festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Warum werden meine Hintergrundbilder in Safari nicht richtig angezeigt? Nächster Artikel：Kann CSS das Quellattribut eines Bildes direkt ändern?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2540

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2688

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

2269

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...