Oft möchte man, dass eine Box in einer bestimmten Farbe, über die gesamte Bildschirmbreite geht. Oft hat das Theme für den Inhalt (content) eine fixe Breite vorgegeben. Die färbige Box würde also einen weißen Rand haben. Mit der Angabe „vw = Viewport Width“ kann man auch hier eine Box in voller Breite erzeugen.
HTML & CSS für eine Box-Breite von 100%:
<!-- braucht dieses externe CSS: <div style="background: linear-gradient(90deg,rgba(230, 107, 10, 1) 0%, rgba(253, 155, 12, 1) 41%, rgba(251, 222, 187, 1) 56%, rgba(221, 222, 226, 1) 67%, rgba(203, 200, 180, 1) 81%, rgba(197, 193, 174, 1) 90%, rgba(201, 201, 199, 1) 100%); position: relative; width: 100vw; margin-left: -50vw; left: 50%;"> <h2 style="width: 1080px; margin: auto; padding: 2.4rem 4rem;">Die Breite von 100%</h2></div>
Dieses externe CSS ist dafür wichtig:
html, body {
margin: 0;
padding: 0;
overflow-x: hidden; /* optional, damit horizontaler Scroll verschwindet */
}
Die Box ist 100% breit (width: 100vw;) und skaliert auch mit, am Handy.
Die Breite von 100%
Das Problem ohne externes CSS:
Bei Google Chrome kommt dann noch die seitliche Scrollbar dazu und das gibt 20 Pixel zu viel in der Breite. Darum bekommt die Seite auch unten (horizontal) eine Scrollbar.
Die Lösung mit dvw (dynamic viewport width)
Man kann die Scrollbar horizontal mit folgendem CSS vermeiden:
.volle-breite {
width: 100dvw;
}
dynamic viewport width: 100dvw: Box passt genau → kein horizontaler Scrollbalken. Damit braucht man das zusätzliche CSS für html und body nicht mehr.
Ein gutes Video zu dem Thema auf YouTube: New CSS viewport units and minimum heights – Webflow tutorial