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

Reind -
Geschatte leestijd: +/_ 7 minuten

Het gros van de websites heeft ze, een header met daarin een logo / menu, een content deel waar de daadwerkelijke content terug te vinden is, en een footer welke vaak opgevuld wordt met de wat minder belangrijke zaken of waar men geen betere plek voor wist te vinden op de pagina.

Toen ik onlangs voor deze site weer eens een nieuw design in elkaar zat te klussen kam de “sticky footer” weer eens op mijn pad. Normaal gesproken zijn een header, content en footer deel de eerste onderdelen welke je opzet binnen een website (de grove structuur) en als dat klaar is en goed in elkaar zit heb je er eigenlijk verder nooit geen omkijken meer naar. Uit automatisme begon ik met optie nummer 4 uit onderstaande lijst (de flexbox manier). Een manier welke ik al jaren lang gebruikt heb op diverse andere websites en prima functioneert. De laatste tijd ben ik echter binnen ZorgDomein bezig de basis van de applicatie om te schrijven naar een layout gebaseerd op een css grid.

Problem bij ZorgDomein was dat daar een hoge mate van flexibiliteit vereist is en dat met “flexbox” niet altijd even goed te realiseren is. Er kwam nog wel eens een “position: fixed” voorbij, iets wat bij mij altijd de vraag op roept “kan dat misschien ook anders?“. Het gebruik van een layout gebaseerd op css grid bleek daar eigenlijk best heel goed te werken, zonder al teveel moeite zelfs in IE11!

Css grid zat vanaf dat moment dus in mijn hoofd en het blijkt een oplossing voor heel veel “problemen” waar we voeger nog wel eens tegenaan liepen bij het bouwen van websites… zoals een footer die we strak tegen de onderkant van de pagina willen hebben.

De ouderwetse manieren, “fixed height footers“.

Negatieve marge op een wrapper container (Voorbeeld op Codepen)

<body>
    <div class="wrapper">
        content
        <div class="push"></div>
    </div>
    <footer class="footer"></footer>
</body>
html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;

  // Negatieve marge, gelijk aan hoogte footer
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

Niet echt ideaal, een vaste hoogte voor een content container kan vandaag de dag in responsive designs echt niet meer. Daarnaast die “push” container… een leeg HTML element om je lay-out overeind te houden, ook niet echt wat je zou moeten willen!

Nog een poging met een negatieve marge (Voorbeeld op Codepen)

<body>
    <div class="content">
        <div class="content-inside">
            content
        </div>
    </div>
    <footer class="footer"></footer>
</body>
html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

Beter? Een klein beetje, het dummy html element is er weliswaar uit maar we zitten nog steeds met een “fixed height” footer en dat was nou juist iets wat we niet wilden.

Calc() to the rescue? (Voorbeeld op Codepen)

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>
.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

Dit dan de beste optie? Nope, nog steeds een “fixed height” footer en dus kan er wat mij betreft ook een streep door deze “oplossing“.

Feit is dat een footer met een vaste waarde vandaag de dag echt een “red flag” is en eigenlijk echt niet meer kan. 10 jaar geleden kwam je hier nog mee weg, vandaag de dag met responsive designs niet meer. Gelukkig hoeft dat ook niet meer en zijn er vandaag de dag andere mogelijkheden welke je flexibiliteit EN het gewenste resultaat geven.

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 *