Wenn Sie schon einmal länger als zehn Minuten eine Webseite gestaltet haben, sind Sie wahrscheinlich vor der klassischen CSS-Hürde gestanden: zu verstehen, wie breit ein 50%-Div tatsächlich in Pixeln ist.
Manchmal fühlt sich CSS wie ein Rezept an, bei dem die Mengenangaben nur „etwas Mehl“ und „ein wenig Wasser“ lauten. Sie wollen genaue Zahlen, aber CSS liefert Ihnen relative Verhältnisse.
Die gute Nachricht? Prozentwerte in Pixel umzurechnen ist keine Hexerei. Es ist eigentlich nur einfache Arithmetik, und sobald Sie die eine goldene Regel für CSS-Prozentwerte verstanden haben, müssen Sie Ihre Layout-Abmessungen nie wieder erraten.
Gehen wir es Schritt für Schritt durch.
Die goldene Regel: Alles dreht sich um das Elternelement
Bevor wir irgendwelche Berechnungen anstellen, müssen wir darüber sprechen, wie CSS denkt.
Stellen Sie sich vor, Sie haben einen riesigen, leeren Bilderrahmen an Ihrer Wand hängen. Dieser Rahmen ist 1000 Pixel breit. Wenn Sie einem Foto sagen, dass es 50% des Platzes einnehmen soll, nimmt es die Hälfte des Rahmens ein (500 Pixel).
In CSS nennt man diesen Bilderrahmen den Parent Container (Eltern-Container). Ein Prozentwert in CSS existiert nicht im luftleeren Raum. Er bezieht sich immer, wirklich immer auf einen Prozentsatz seines direkten Elternelements.
Wenn Sie die Größe des Elternelements nicht kennen, können Sie den Pixelwert des Kindelements nicht berechnen. So einfach ist das!
Die einfache Mathematik hinter der Umrechnung
Sobald Sie die Pixelbreite (oder -höhe) Ihres Eltern-Containers kennen, ist die Rechnung ganz einfach. Hier ist die Formel:
(Größe des Elternelements in Pixeln × Prozentwert) ÷ 100 = Zielwert in Pixeln
Nehmen wir an, Ihr Eltern-<div> ist 800px breit und Sie möchten, dass das Kind-<div> 75% breit ist.
-
800 × 75 = 60.000
-
60.000 ÷ 100 = 600px
Ihr Kind-Container wird mit einer Breite von exakt 600 Pixeln gerendert.
Schritt-für-Schritt-Beispiel: Die Praxis
Schauen wir uns ein praxisnahes Szenario an. Sie erstellen ein klassisches Blog-Layout: einen Hauptinhaltsbereich und eine Seitenleiste (Sidebar), die nebeneinander in einem Wrapper liegen.
Hier ist Ihr HTML:
<div class="wrapper">
<div class="main-content">Das ist der Artikel.</div>
<div class="sidebar">Das ist die Seitenleiste.</div>
</div>Hier ist Ihr CSS:
.wrapper {
width: 1200px;
}
.main-content {
width: 70%;
}
.sidebar {
width: 30%;
}Schritt 1: Das Elternelement identifizieren
Das Elternelement von sowohl .main-content als auch .sidebar ist der .wrapper.
Schritt 2: Den Pixelwert des Elternelements ermitteln
Blicken wir in unser CSS: Für den .wrapper sind fest 1200px vorgegeben.
Schritt 3: Die Rechnung durchführen
-
Hauptinhalt: (1200 × 70) ÷ 100 = 840px
-
Seitenleiste: (1200 × 30) ÷ 100 = 360px
Wenn Sie diese Elemente in den Entwicklerwerkzeugen Ihres Browsers untersuchen, werden Sie sehen, dass sie exakt 840px und 360px entsprechen.
Die Stolperfallen: Padding, Margins und Box-Sizing
In einer perfekten Welt wäre diese Rechnung schon alles. Aber CSS hat eine tückische Art, uns dazwischenzufunken: das Box-Modell.
Standardmäßig rechnet CSS, wenn Sie einer Box sagen, dass sie 50 % breit sein soll, und Sie dann 20px Padding hinzufügen, diese 20px zu den 50 % hinzu. Plötzlich ist Ihre Box breiter als berechnet und Ihr gesamtes Layout bricht in die nächste Zeile um.
Die Lösung: Verwenden Sie immer box-sizing: border-box;.
* {
box-sizing: border-box;
}Stellen Sie sich border-box so vor, als würden Sie dem Browser sagen: „Wenn ich 50 % sage, meine ich 50 % insgesamt, inklusive Innenabstand (Padding) und Rahmen (Borders). Rechne das aus.“ Das hält Ihre Pixel-Umrechnungen präzise und verhindert Layout-Brüche.
Hinweis: Außenabstände (Margins) werden weiterhin außerhalb der Box angewendet, daher müssen Sie diese separat berücksichtigen!
Spickzettel auf einen Blick
Möchten Sie nicht jedes Mal den Taschenrechner herausholen, wenn Sie CSS schreiben? Hier ist ein Spickzettel für gängige Prozentwerte basierend auf Standard-Breiten von Eltern-Containern.
| Breite des Elternelements | 10% | 25% | 33,33% (Ein Drittel) | 50% | 75% |
| 800px | 80px | 200px | ~266px | 400px | 600px |
| 1000px | 100px | 250px | ~333px | 500px | 750px |
| 1200px | 120px | 300px | 400px | 600px | 900px |
| 1440px | 144px | 360px | 480px | 720px | 1080px |
Das Umrechnen von Prozentwerten in Pixel läuft letztendlich nur darauf hinaus, den jeweiligen Eltern-Container ausfindig zu machen. Sobald Sie wissen, wie groß der „Bilderrahmen“ ist, wird das Anpassen der Inhalte darin zum Kinderspiel.
Und falls Sie jemals genau das Gegenteil tun müssen – den Prozentwert aus einem festen Pixelwert ermitteln –, können Sie sich die Rechnerei komplett sparen und einfach einen schnellen Pixel-zu-Prozent-Konverter verwenden.