Általában nem érdekel ez a kérdés, mert van annyi kontentem, hogy az autómatikusan kitöltsön legalább egy oldalt és ezáltal a lap aljára nyomja a footert. De mi van akkor, ha csak nyúlfarknyi tartalmunk van, de szeretnénk, ha a footer minden esetben az oldal alján szerepeljen?
Lehetne {position:fixed; bottom: 0} beállítással operálni, viszont ez esetben szó szerint mindíg a látótérben lenne az elem, ami elrabol jópár pixelt a tartalomból, ami mobilon különösen fájó lenne.
Megcsináltam Codepen-ben, de alább összefoglalom, mik a kulcs pontok, hátha úgy érthetőbb.
A helyes megoldás a következők kombinációja CSS-ben:
- a html és a body height tulajdonságát 100%-ra állítani. Ezzel elérjük, hogy a "vászon" mindíg kitölti a böngészőablakot hosszában. Ehhez viszonyulnak majd a többi elem értékei.
- valamilyen wrapper elembe ágyazni a főbb elemeket. A wrappert így állítsuk be: {min-height: 100%;
position: relative;}, illetve ne felejtsük el a szabadon választott vizuális beállításokat (szélesség, szín, margó stb). Ezzel elértük, hogy ennek a bennfoglaló elemnek a magassága mindíg legalább(!) a böngészőablak teljes magassával egyezzen meg - a footert megelőző elemnek adni egy alsó paddingot, ami megegyezik a footer magasságával. ez azért szükséges, mert a footert 'absolute' megoldással fogjuk pozicionálni, ami nem veszi figyelembe, ha valami elé lóg. Mintha egy plusz rétegen külön életet élne a többi elemtől.
- a footert következőképp beállítani: a saját magasságával egyenlő margin-top beállítása mínusz értéken. Ezzel elérjük, hogy a fölötte lévő elem paddingjára lógjon rá az elem, kilőve a felesleges plusz szünetet. Ezen kívül: {position: absolute; bottom: 0}, illetve az egyéni preferenciáink.
Mostmár csak arra kell rájönnöm, mi lenne hasonló, és jól működő megoldás arra az esetre, ha nem szeretnénk meghatározni a footer magasságát pixelpontosan, mivel szeretnénk a a bennfoglalt tartalomhoz idomulna.
