Prilipęs Footer'is
Posted by Mindaugas Kurlavičius 24/04/2007 at 22h14
Kas susidūrė su CSS, žino kokia velniava yra padaryti puslapį be šlykščių ir niekaip nenusibaigiančių lentelių "table", vienodai atrodantį (ir identiškai besielgiantį) visose naršyklėse. IE košmarai, Firefox bug'ai, dar prakeiktas Safari (Opera dzin :)... Žodžiu vieno standarto nėra, kiekvienai mažai užduotėlei realizuoti nusistovėjo purvini "hakai" ir visi (naršyklių kūrėjai bei web programuotojai) toliau gyvena laimingi ir patenkinti.Taigi šiandien papasakosiu, kaip išpręsti prilipusio footer'io problemą ištęstuotą ant IE ir Firefox.
Pačią problemą galima būtų taip apibūdinti: puslapyje yra footer'is - fiksuoto aukščio apatinis (paskutinis matomas) blokas (juosta). Kaip žinome, visi blokai (ne float) išsidėsto vienas po kito ir jeigu turinio yra daug tuose blokose, footeris nustumiamas į apačią, kuri yra "žemiau" naršyklės lango apačios ir "paskrolinus" puslapį žemyn matome prie apačios prilipusį footerį. Tačiau, ką daryti, jei puslapis neturi daug turinio, bet mes vistiek norime, kad footeris butų naršyklės lango apačioje?
Geras mano draugas vardu Google patarė štai ką:
# Layout'o šablonas
<html>
<body>
<div id="nonFooter">
# Čia talpinam visą puslapio turinį
</div>
<div id="footer">
# Footerio turinys
</div>
</body>
</html> Ir į CSS failą įterpiam tokį kodą:
# CSS failiukas
html {
height: 100%;
}
body {
height: 100%;
}
#nonFooter {
position: relative;
min-height: 100%;
}
* html #nonFooter {
height: 100%;
}
#footer {
position: relative;
/* Nurodome margin tokio paties aukščio kaip ir footeris */
margin-top: 50px;
} Neįprasta, keista, bet viskas veikia, užsakovas švyti, o mes pasikeikiam ir dirbam toliau...
