Få alle containere til å fylle skjermen

Kodesnutt viser deg hvordan CSS-trikset med enheten vw redder dagen.

📽️: Mikael Brevik Vis mer

- Det jeg har jobba mye på, er å få til illustrasjoner eller gradienter som går utenfor sin egen container, forteller utvikler Mikael Brevik i denne ukas Kodesnutt.

- Og en ting som alene er ganske interessant, og har vært ganske problematisk i CSS, er å få et barneelement til å gå utenfor foreldreelementet.

Heldigvis kom han over et CSS-triks fra CSS-Tricks.com, hvor man bruker den relativt nye CSS-enheten vw (viewport width) til å la barn trosse foreldrene sine.

For eksempel for å fylle hele bredden av skjermen, selv om elementet egentlig ikke får lov av foreldrene sine, som har en satt bredde.

- Det er vanskeligere enn man skulle tro, som Brevik sier.

Men trikset er, veldig kort fortalt, dette:

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Videoen, med Breviks forklaring på hvordan dette faktisk funker, ser du øverst. Og her ser du den fulle koden fra episoden:

See the Pen Content larger than container by Mikael Brevik (@mikaelbr) on CodePen.