In der letzten Woche wurde ich von unserem Designer mal wieder vor eine zunächst scheinbar nicht umsetzbare Aufgabe gestellt. Aber was ist schon unmöglich? ;)
Die Designvorgabe lautete, dass ein Container, der über ein Template in eine bestehende Seite und damit in einem vorgegeben „grid“ eingebunden wird, eine andere „background-color“ über das komplette Browserfenster erhalten sollte.
Meine erste Idee war sofort, dieses über „position: absolute“ und „left/right: 0“ zu lösen, was aber den unschönen Nebeneffekt hat, dass dieses Element komplett aus dem Dokumentenfluss verschwindet und dies natürlich auf alle folgende Elemente Einfluss hat.
Nach ein wenig überlegen und recherchieren, bin ich dann zu einer sehr schönen und einfachen Lösung gekommen, die ich hiermit mit euch teilen möchte:
.full-width {width: 100vw;position: relative;left: 50%;right: 50%;margin-left: -50vw;margin-right: -50vw;}
Die Idee ist hier: den Container in die Mitte des Browserfensters zu setzen „left: 50%“, dann mit „margin-left: -50vw“ wieder zurück an den Rand des Browserfensters zu drücken. Das Gleiche dann auf der rechten Seite nochmal und schon hat man das gewünschte Element über das komplette Browserfenster gesetzt. Und das ganze ohne irgendwelche Berechnungen oder dass man wissen muss wie groß das parent-Element ist. Dies bietet sich z.B. auch an, wenn man mal ein Bild einbinden will, welches sich über den kompletten Screen ziehen soll.
So sieht das ganze dann aus:
<body><div class="wrapper"><p>Lorem ipsum...</p><img class="grid-width" src="http://placehold.it/200x50" alt=""><p>Lorem ipsum...</p><img class="full-width" src="http://placehold.it/200x50" alt=""><p>Lorem ipsum dolor...</p></div></body>
