Fließende Breiten mit Prozentangaben
Verwenden Sie prozentbasierte Breiten, um Layouts zu erstellen, die sich an ihren Container anpassen.
Fließende Breiten mit Prozentangaben ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum fluide Breiten?
Layouts mit fester Breite (in Pixeln) funktionieren nicht auf Bildschirmen, die schmaler als diese feste Breite sind. Fluide Breiten mit Prozentwerten lassen Layouts proportional an jede Container- oder Viewportgröße anpassen.
Grundlagen prozentualer Breiten
Eine prozentuale Breite bezieht sich auf die Breite des übergeordneten Containers. Ein untergeordnetes Element mit width: 50% ist immer halb so breit wie sein übergeordneter Container.
<div style="width:300px;border:1px dashed #999;padding:4px;">
<div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
<div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>Prozentuale Breiten und box-sizing
Mit box-sizing: border-box umfassen prozentuale Breiten Padding und Rahmen. Dadurch sind prozentuale Spalten einfach: 50% ist unabhängig vom Padding tatsächlich die Hälfte.
<div style="width:300px;border:1px dashed #999;">
<div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>Fluide zweispaltige Layouts
Ein einfaches fluides Layout auf Float-Basis (veraltet):
<div style="width:100%;overflow:auto;">
<div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
<div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>Fluide Flexbox-Spalten
Mit Flexbox lassen sich fluide Spaltenlayouts übersichtlicher umsetzen:
<div class="flex-row">
<div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
<div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>Prozentuales Padding
Prozentuales Padding bezieht sich immer auf die Breite des übergeordneten Elements (nicht auf seine Höhe) – auch beim oberen und unteren Padding. So lassen sich Tricks mit Seitenverhältnissen umsetzen:
<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>Modernes Seitenverhältnis
Die Eigenschaft aspect-ratio ersetzt den Padding-Trick zum Beibehalten von Seitenverhältnissen:
<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>max-width mit fluidem Layout
Durch die Kombination von Prozentbreiten mit max-width wird verhindert, dass Zeilen auf großen Bildschirmen zu breit werden:
<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>Problemfall prozentualer Höhen
Prozentuale Höhen erfordern, dass das übergeordnete Element eine definierte Höhe hat. Hat das übergeordnete Element height: auto, werden prozentuale Höhen von untergeordneten Elementen ebenfalls zu auto berechnet.
Schlüsselwörter für intrinsische Größen
Modernes CSS bietet weitere Optionen für fluide Größen:
min-content: kleinste Größe, in die der Inhalt passtmax-content: Größe, in die der gesamte Inhalt in eine Zeile passtfit-content: zwischen min-content und max-content
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>Muster für ein fluides Raster
Ein häufig verwendetes fluides Raster mit inline-block (veraltet) oder modernem CSS:
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
<div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>Kurzer Check
Ein übergeordnetes Element ist 600px breit. Ein untergeordnetes Element hat width: 60% und padding: 20px (box-sizing: border-box). Wie breit ist der Inhaltsbereich des untergeordneten Elements?
Zusammenfassung
Prozentuale Breiten erzeugen fluide Layouts, die mit ihrem übergeordneten Container skalieren. Kombinieren Sie sie mit max-width, um übermäßig breite Inhalte zu verhindern. Verwenden Sie aspect-ratio für responsive Medien. Flexbox und Grid verarbeiten fluide Spalten eleganter als Floats mit Prozentbreiten.
Häufig gestellte Fragen
Ist die Lektion „Fließende Breiten mit Prozentangaben“ kostenlos?
Ja — der vollständige Text von „Fließende Breiten mit Prozentangaben“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Fließende Breiten mit Prozentangaben“?
Verwenden Sie prozentbasierte Breiten, um Layouts zu erstellen, die sich an ihren Container anpassen. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Fließende Breiten mit Prozentangaben“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Mobile-First- vs. Desktop-First-Ansatz
- Fließende Breiten mit Prozentangaben
- Muster mit Min-Width und Max-Width
- Responsive Bilder und das Picture-Element