“Sticky footer”, de CSS grid oplossing (voor eigenlijk alles)

Reind -
Geschatte leestijd: +/_ 7 minuten

Hedendaagse oplossingen met flexibiliteit.

Flexbox (Voorbeeld op Codepen)

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

Flexbox dan de oplossing? Daar lijkt het wel op! Geen vast opgegeven hoogte vereist voor de footer waardoor je flexibel blijft qua invulling binnen de footer en de content vult netjes de beschikbare overgebleven hoogte op.

Ideaal zou je denken maar (er is altijd een maar), wat nu als we de header en footer op een pagina fixed willen hebben? En als we er ook nog een sidebar in willen zetten? 1 dimensionaal is geen enkel probleem bij een flexbox oplossing maar 2 dimensionaal is echt even een wat lastiger verhaal, en dan blijkt een css grid de “ultieme” oplossing te zijn voor hedendaagse browsers.

De beste (oke, naar mijn mening dan) oplossing, CSS grid! (Voorbeeld op Codepen)

<div class="header">
  Header
</div>
<div class="aside">
  Sidebar
</div>
<div class="main">
  Content
</div>
<div class="footer">
  <p>
    Footer<br />
    Heel flexibel, past zich automatisch aan aan de content welke binnen de footer geplaatst word
  </p>
</div>
html, body {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
}

body {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: min-content 1fr min-content;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.header {
  grid-column: 1/-1;
  grid-row: 1;
  padding: 10px;
  background: #ff6b6b
}

.aside {
  grid-column: 1;
  grid-row: 2;
  padding: 10px;
  background: #292f36;
}

.main {
  grid-column: 2;
  grid-row: 2;
  padding: 10px;
  background: #ffe66d;
}

.footer {
  grid-column: 1/-1;
  grid-row: 3;
  padding: 10px;
  background: #4ecdc4;
}

In tegenstelling tot flexbox waarbij je in de hoogte OF breedte werkt geeft het gebruik van CSS grids je dus de mogelijkheid om in de hoogte EN de breedte te werken. Daarnaast is geeft het je de mogelijkheid om bijvoorbeeld te spelen met de “scroll area” op verschillende viewports en zou je er bijvoorbeeld voor kunnen kiezen om op mobiel de “main” container altijd de hoogte te geven die hij nodig heeft voor alle content, maar hem op desktop te limiteren tot de beschikbare ruimte tussen “header” en “footer” en in plaats van de hele pagina een scrollbar te geven deze alleen op de overflow van de “main” te zetten.

Bovenstaand klinkt misschien wat vaag maar deze Codepen geeft exact weer wat ik bedoel. Wanneer je de browser verkleint (< 1024) zul je zien dat de “footer” uit beeld gedrukt wordt door de content van de “aside” en “main” container. Wanneer je de browser window vergroot (> 1024px) zie je dat de “header” en “footer” in beeld blijven ongeacht het feit dat de content in zowel de “aside” als de “main” hoger zijn, deze hebben beiden een scrollbar gekregen om de content alsnog zichtbaar te krijgen middels scrollen.

Juist het verplaatsen van de “scrollbar” op verschillende viewports was iets wat bij ZorgDomein een “vereiste” was voor de UX afdeling. Zo staat bijvoorbeeld de “toolbar” altijd vast onderin het scherm waarin de primaire acties altijd beschikbaar zijn voor een gebruiker met een resolutie van 768px x 1024px of hoger.

En Internet Explorer dan?

Simpel, vanaf IE10 werkt css grid prima in zijn meest simpele vorm! Je hebt soms weliswaar nog wel wat prefixes nodig (autoprefixer for the win) en je zult wat features missen als bijvoorbeeld “grid-gap” om wat standaard spacing te geven tussen de rijen en kolommen maar hier is met behulp van een specifieke IE10 + IE11 media query prima omheen te werken.

Er is dus geen enkele reden om niet met css grid aan de gang te gaan tenzij je support moet leveren voor IE9, die heeft namelijk 0,0 support voor het gebruik van CSS grid. Wanneer je echter nog verplicht wordt om IE9 te supporten is het misschien tijd eens op zoek te gaan naar wat vernieuwenders 😉

Reind -
Geschatte leestijd: +/_ 7 minuten

2 Reacties

  1. Rene
    Klinkt goed allemaal, ik ga me er ook maar eens beter in verdiepen. IE9 support doe mik al jaren niet meer aan, waarom zou ik het als front-end developer nog supporten als Microsoft zelf niet eens meer support biedt voor IE9. Bedrijven zouden eens op moeten houden met dergelijke eisen, het beperkt je namelijk enorm als developer.
  2. Jeron
    Raar eigenlijk dat we jaren lang alles met flexbox op hebben zitten lossen terwijl css grid ook gewoon voor handen was :-s

Reageer

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *