Lebegő footer
2022. február 14. (hétfő) 14:45
Nem tudom, hogy csak nekem bántja a szemem, vagy talán túlérzékeny vagyok erre a problémára, de nagyon sok weblap esetén szembesülök azzal a jelenséggel, hogy ha a monitor méretéhez, felbontásához képest kevés tartalom van egy adott oldalon ami miatt az nem tölti ki legalább egy egész képernyőnyi magasságot, akkor az üres, kitöltetlen terület a footer alá kerül. Azaz a footer – már természetesen csak akkor, ha egyáltalán van ilyen, de a weblapok többségénél ugye van – nem illeszkedik a böngésző aljához.
Szerintem rettenetesen nevetséges tud lenni és bármilyen – amúgy remek – dizájnt képes tönkretenni.
És nem csak azért furcsállom, a dolgot, mert igen gyakori, hanem mert nagyon sok, komoly, magára és arculati megjelenésére sokat adó cég látszólag magas költségvetéssel és nagy műgonddal készített oldalainál tapasztalható ez az amúgy sokféleképpen és könnyen kivédhető jelenség.
Ott van például a jó öreg flexboxos megoldás, ahol akár az egész <body>, akár egy tetszőleges wrapper elemet beállítunk oszlop irányú flexinek,
majd az ebben elhelyezett tartalmat nyújthatónak, a footert pedig nem nyúljthatónak.
Valahogy így:
<body style="display: flex; flex-flow: column nowrap;">
<main style="flex: 1 0 auto;">
oldal tartalom
</main>
<footer style="flex: 0 0;">
footer tartalom
</footer>
</body>
Ennyi. És máris kinéz valahogy az egész.