jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS Stretch-Sizing-Generator

Generieren Sie CSS mit dem stretch-Schlüsselwort für fill-available-Größen in Block-, Flex-, Grid- und absolut positionierten Layouts.

Tool wird geladen...

Was ist CSS Stretch-Sizing-Generator?

Das CSS stretch-Schlüsselwort (Chrome 138+) ist der Standardwert für fill-available-Größenanpassung und ersetzt die vendor-prefixten Schlüsselwörter -webkit-fill-available und -moz-available. Wenn Sie width: stretch setzen, wird das Element so bemessen, dass es den verfügbaren Platz unter Verwendung der margin-box-Größenanpassung ausfüllt — das bedeutet, die margin-box des Elements passt in den umgebenden Block. Dies unterscheidet sich von width: 100%, das die content-box-Größenanpassung verwendet und bei Padding, Border oder Margin häufig überläuft. stretch funktioniert in Block-, Flex-, Grid- und absolut positionierten Layout-Kontexten.

Kurze Antwort

Verwenden Sie width: stretch oder height: stretch für eine standardisierte fill-available-Größenanpassung. Im Gegensatz zu width: 100% verwendet stretch die margin-box-Größenanpassung, sodass Padding und Border keinen Überlauf verursachen. Ersetzt -webkit-fill-available und -moz-available durch ein einziges standardisiertes Schlüsselwort. Chrome 138+, Firefox 130+, Safari 18.2+.

Last updated: 2026-05-30

Einschränkungen

  • stretch wird noch nicht in allen Browsern unterstützt. Chrome 138+, Firefox 130+ und Safari 18.2+ unterstützen es. Behalten Sie vendor-prefixte Fallbacks (-webkit-fill-available, -moz-available) und einen width: 100%-Fallback für ältere Browser bei.
  • stretch funktioniert nur auf Elementen mit Block-, Flex-, Grid- oder absolut positioniertem Display. Inline-Elemente, Tabellenzellen und ersetzte Elemente (img, video, iframe ohne explizite Größenangabe) unterstützen keine stretch-Größenanpassung.
  • In Flex- und Grid-Kontexten kann stretch unerwartet mit Ausrichtungseigenschaften interagieren. Ein Flex-Element mit align-self: stretch und width: stretch kann widersprüchliche Größenanweisungen erzeugen — das stretch-Schlüsselwort auf der Größeneigenschaft hat Vorrang vor der Ausrichtungsstreckung.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie Ihren Layout-Kontext — das Verhalten von stretch unterscheidet sich geringfügig zwischen Block-, Flex-, Grid- und absolut positionierten Elementen.
  2. Wählen Sie die Achse, die Sie strecken möchten (Breite, Höhe oder beide via inset: 0 für absolut positionierte Elemente).
  3. Lesen Sie den layoutspezifischen Hinweis, der erklärt, wie stretch mit Margins, Padding und dem umgebenden Block in Ihrem gewählten Kontext interagiert.
  4. Kopieren Sie das generierte CSS und ersetzen Sie vorhandene width: 100%-Muster oder vendor-prefixte fill-available-Deklarationen.

Wofür du es nutzen kannst

  • Ersetzen Sie width: 100% bei einem Input- oder Select-Element, das aufgrund von Padding und Border über seinen Elterncontainer überläuft — stretch verwendet margin-box-Größenanpassung, sodass die gesamte Box in den Container passt.
  • Vereinheitlichen Sie die Cross-Browser-fill-available-Größenanpassung durch Ersetzen von -webkit-fill-available und -moz-available mit dem standardisierten stretch-Schlüsselwort.
  • Lassen Sie ein absolut positioniertes Element ohne explizite top/right/bottom/left-Werte bis zu den Rändern seines positionierten Vorfahrens strecken.

Anwendungsfalle

Praxisbeispiele

Beispiel

Vollbreiten-Input ohne Überlauf

Ein Suchformular hat ein Input-Feld mit padding: 8px 12px und border: 2px. Bei Verwendung von width: 100% überläuft das Input seinen Container um 28px auf jeder Seite. Durch die Änderung auf width: stretch passt die margin-box in den Container und das Input bleibt bündig mit den Formularrändern.

Beispiel

Migration von vendor-prefixtem fill-available

Ein Legacy-Stylesheet verwendet width: -webkit-fill-available mit einem -moz-available-Fallback. Ersetzen Sie beide mit width: stretch — das Standardschlüsselwort funktioniert auf dieselbe Weise und wird in Chrome 138+, Firefox 130+ und Safari 18.2+ unterstützt. Die Fallback-Deklarationen können für ältere Browserversionen erhalten bleiben.

Haufige Fehler

  • Zu erwarten, dass stretch sich in Block-Layouts identisch zu width: 100% verhält — 100% verwendet content-box-Größenanpassung und ignoriert Padding/Border auf dem Element selbst, während stretch die margin-box-Größenanpassung verwendet. In den meisten Fällen ist stretch das gewünschte Verhalten für Inputs und Formularelemente.
  • Stretch auf einem Flex-Element zu verwenden, wenn der Flex-Container align-items: stretch hat — das stretch-Schlüsselwort auf dem Element überschreibt die stretch-Ausrichtung des Containers, was zu unerwarteter Größenanpassung führen kann.
  • Anzunehmen, dass stretch in Inline-Layout-Kontexten funktioniert — stretch gilt nur für Elemente mit einem Block-, Flex-, Grid- oder absolut positionierten Anzeigetyp. Inline-Elemente ignorieren stretch und fallen auf die intrinsische Breite zurück.

Überprüfung

  1. Inspizieren Sie das Element in DevTools und überprüfen Sie, ob die berechnete Breite oder Höhe der erwarteten fill-available-Größe entspricht — das Element sollte auch mit Padding und Border nicht über seinen Container hinausragen.
  2. Ändern Sie die Größe des Viewports oder Containers und bestätigen Sie, dass sich das Element bei allen Größen dehnt, um den verfügbaren Platz auszufüllen. Vergleichen Sie es Seite an Seite mit einer width: 100%-Referenz, um den Unterschied bei schmalen Viewports zu sehen.

FAQ

Fragen zu CSS Stretch-Sizing-Generator

Wie unterscheidet sich stretch von width: 100% in Bezug auf Padding und Border?

width: 100% bezieht sich auf die content-box-Breite des umgebenden Blocks, dann werden Padding und Border hinzugefügt — das Element überläuft seinen Container. stretch bemisst die margin-box so, dass sie den verfügbaren Platz ausfüllt, daher werden Padding und Border von der Gesamtbreite abgezogen, wodurch das Element innerhalb seines Containers bleibt. Dies macht stretch zu dem Verhalten, das die meisten Entwickler von width: 100% erwarten, insbesondere bei Formularelementen.

Funktioniert stretch in anderen Schreibrichtungen als horizontal-tb?

Ja. stretch respektiert die Schreibrichtung des Elements. In vertikalen Schreibrichtungen (vertical-rl, vertical-lr) streckt width: stretch entlang der Inline-Achse (vertikal) und height: stretch entlang der Block-Achse (horizontal), entsprechend der Schreibrichtung. Dies macht stretch schreibrichtungsbewusster als feste Pixel- oder Prozentangaben.

Was ist der Unterschied zwischen stretch und dem neueren fill-available-Schlüsselwort?

fill-available und stretch sind derselbe Wert mit unterschiedlichen Namen. Die CSS-Spezifikation schlug ursprünglich fill-available vor, benannte es dann vor der Implementierung in stretch um. stretch ist der kanonische Name. Beide führen in unterstützenden Browsern zur gleichen intrinsischen Größenberechnung, aber nur stretch ist garantiert vorwärtskompatibel.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren