Na dnu stranice je footer (podnožje) omanjeg sadržaja. Stvar super izgleda kad je ukupan sadržaj VIŠI od visine prozora preglednika (tj. postoji scrollbar s desne strane), ali nije naj kad je sadržaj NIŽI od visine prozora (npr. kontakt stranica).
U tom slučaju želimo da footer bude na dnu prozora - nabijen na donji rub browsera.
• • • • •
Postoje različita rješenja i varijacije istih, ovdje ću objasniti shemu dobivenu starom isprobanom metodom pokušaja-i-pogreške. Skica:
Cijela solucija se svodi na to da je footer konkretne visine, a wrapper je visok koliko i stranica MINUS visina footera (negativni margin-bottom). Jezikom CSSa:
wrapper { margin-bottom: -30px }
footer { height: 30px }
Spacer je dodan zbog nekih preglednika koji nabiju footer preko sadržaja (iz wrappera) u slučaju da je taj sadržaj veći (viši) od veličine prozora preglednika. On je visok isto koliko i footer.
spacer { padding-bottom: 30px }
I na kraju moramo riješiti još IE6 te 7 (osmica je ok).
#wrapper { height: auto !important; height: 100% }
Znam, znam. Ali radi. Ne pitaj, samo prepiši. :)
• • • • •
Cijeli CSS::
* { margin: 0; padding: 0 }
body, html { height: 100% }
#footer { background: #0f0; font-size: 25px; height: 30px; text-align: center }
#wrapper { margin: 0 auto -30px; min-height: 100%; }
#spacer { padding-bottom: 30px }
Plus ovaj dio za IE6+7 se ugura uvjetnim komentarom.
<!--[if LTE IE 7]>
<style type="text/css">
#wrapper { height: auto !important; height: 100% }
</style>
<![endif]-->
Kod radi na IE6+, Firefoxu, Safariju, Chromeu i Operi. Sve to pod Win, ako naiđete na problem na Macu i Linuxu - ispravite me.
Trebalo bi raditi bez obzira na DOCTYPE. (Ionako koristite samo STRICT, jelda?)
Demo ovdje, download ondje (ZIP).
Neka druga rješenja:
- New CSS Sticky Footer
- A CSS Sticky Footer
- Sticky Footer
Cheerio!
Vezani postovi:
- CSS: Prozirnost u svim preglednicima
- CSS: Kako centrirati sadržaj na stranici?
- CSS: Zaobljeni rubovi 2
- CSS: Targetiranje preglednika
- CSS: Zamjena teksta slikom
- Utopija za web majstore
- Zaobljeni rubovi
Programiranje
Komentara: 4
Tweet
RSS feed