De footer van je website. Hoe zet je die netjes onderin de browser als de inhoud van je pagina korter is dan je browser, maar wel altijd onder de inhoud indien je moet scrollen? Dat gaan we in dit topic behandelen.
We hebben op zich helemaal niet veel nodig om ons doel te bereiken: Een div met een div erin en een div voor de footer met een div erin. De truc is om je gehele pagina in een div te wikkelen, behalve de footer. Door de footer buiten te sluiten, wordt deze automatisch naar beneden gedwongen.
De HTML-code:
<div id="page">
<div id="pageInner">
</div><!-- /pageInner -->
</div><!-- /page -->
<div id="footer">
<div id="footerInner">
Dit is de footer
</div><!-- /footerInner -->
</div><!-- /footer -->
Wat we hierboven hebben gedaan is een div aangemaakt met de id 'page' en daarin een div 'pageInner. Alles wat er op de webpagina word weergegeven komt hierin te staan, behalve de footer. Alles wat NIET bij de footer hoort, gaat dus in de div 'pageInner'. Waarom twee divs dan? Aan het einde van deze tutorial wordt duidelijk waarom dit nodig is.
Dan hebben we eronder de div 'footer' geplaatst. zoals je kan zien is deze div geheel gescheiden van de bovenstaande div. In de div 'footer' staat nog een div 'footerInner'. Ook hierover geef ik nader uitleg aan het einde van deze tutorial.
De CSS dus. Deze is eigenlijk vrij simpel. Laten we beginnen met het geven van achtergrond-kleuren aan een aantal elementen, zodat we precies kunnen zien wat we doen:
html, body {
background-color:aqua;
}
#page {
background-color:lime;
}
#footerInner {
background-color:fuchsia;
}
Zoals je hier wellicht is opgevallen, maken we hier onder andere gebruik van een 'html, body'-tag. Dit is geen class of id die wij hebben meegegeven, maar het is zoals de naam al doet vermoeden van toepassing op de html-tag en body-tag die in iedere HTML pagina standaard aanwezig zijn. Deze gaan we zometeen een extra eigenschap mee geven, vandaar dat we hem noemen.
Het tweede opvallende is dat we niet de footer-div zelf, maar de div daarin (footerInner) een achtergrond kleur hebben gegeven.Waarom ik dit doe, laat ik verderop in dit topic zien.
Op dit moment valt er nog niet veel te zien, alles is lichblauw (dit is dus de 'html, body'). We gaan nu verder met de volgende stap: Hoogtes. Als we geen hoogtes aangeven aan alles wat boven de footer staat, zal de footer niet naar beneden worden geduwd. Hier komt de 'html, body'-tag aan bod. Deze gaan we een height geven van 100% (We geven op deze manier aan dat de html EN body altijd de hele hoogte van het venster van de browser moeten gebruiken).
Dit is echter nog niet genoeg. Ook de 'page'-div geven we een height van 100%. Daarmee vertellen we de 'page'-div dat hij altijd van de volledig beschikbare ruimte gebruik moet maken die de parent (in ons geval dus de 'html, body') bied en die is net zo hoog als het venster van de browser. (aangezien de html-tag geen parent heeft, is 100% de hoogte van het venster van de browser).
Ook de 'footer'-div moet een hoogte krijgen, deze zetten we op 50px en ook de 'footerInner'-div zetten we op 50px om even hoog te worden als zijn parent (footer). Tevens geven de 'footerInner' een float:left, zodat we afdwingen dat 'footer' netjes om 'footerInner heen valt.
html, body {
background-color:aqua;
height:100%;
}
#page {
background-color:lime;
min-height:100%;
}
#footer {
height:50px;
}
#footerInner {
background-color:fuchsia;
float:left;
height:50px;
}
Als je dit alles nu in je browser previewt, zie je al iets meer. Er staat nu een groot groen vlak (page) in het blauwe en je ziet een scroll-balk. Als je dan helemaal naar beneden scrollt, dan zie je een roze vlakje links onder in beeld, dat is de 'footerInner'-div.
Voordat we naar de laatste stap gaan, eerst nog even wat muggenziften: We geven 'footerInner' een 100% width, zodat het roze vlak zich mooi uitbreid over de hele breedte van de pagina. Heel misschien denk je nu wel: Ho ff, waarom is die 'page'-div dan wel al even breed als de pagina, terwijl we daar niets hebben gedefinieerd? Scherp... ;-)
Welnu, de 'footerInner', die we de achtergrond-kleur hebben gegeven, staat in een parent (footer) waarbij we geen width hebben gedefinieerd. De 'footerInner' heeft dus geen referentie en gaat een aanname doen van hoe breed hij moet zijn. Hij bepaald dan standaard dat hij zijn breedte aanpast aan de inhoud (dat is in ons geval de tekst 'Dit is de footer'). Maar, denk je nu: Voor de parent van de 'page'-div hebben toch ook geen width gedefinieerd? Je let goed op ;-) De parent van de 'page'-div is de body, deze heeft standaard al een breedte van 100%.
Verder halen we nog de margins en paddings weg uit de 'html, body'-tag in de CSS. Op deze manier verwijderen we de blauwe randen die zojuist nog zichtbaar waren.
De code:
html, body {
background-color:aqua;
height:100%;
margin:0;
padding:0;
}
#page {
background-color:lime;
min-height:100%;
}
#footer {
height:50px;
}
#footerInner {
background-color:fuchsia;
float:left;
width:100%;
height:50px;
}
Je zou nu het volgende moeten zien:
Het begint al ergens op te lijken, maar hebben nog een probleem: De scrollbalk. Onze footer staat nu netjes onderaan, maar nu hebben we zo'n vervelende scrollbalk waardoor de footer buiten beeld valt. Hoe komt dit? Heel simpel, we hebben de 'page'-div een 100% hoogte (dus de totale hoogte van het venster van de browser) gegeven, dus de hoogte van de footer komt nog eens bovenop die 100%. Het geheel is dus groter dan het venster van de browser.
Om dit op te lossen geven we de footer-div een negatieve marge aan de bovenkant: margin-top:-50px;. De negatieve marge zorgt ervoor dat de 'footer'-div de 'page'-div een stukje gaat overlappen. Je trekt dus als het ware de footer omhoog, over de 'page'-div heen.
(het laatste element in de html-pagina schuift standaard over de voorgaande element heen in geval van overlapping en het voorgaande element gaat dus standaard onder het element erna. Hetzelfde geldt voor elementen die in een ander element liggen, de binnenste ligt standaard bovenop).
De waarde van de negatieve marge moet hetzelfde zijn als de hoogte van de footer (in ons geval dus 50px), zodat de onderkant van de footer gelijk komt te staan met de onderkant van de 'page'-div.
de footer-tag in de CSS moet er nu zo uitzien, rest blijft ongewijzigd:
#footer {
height:50px;
margin-top:-50px;
}
Et voila! De scrollbalk is weg :-)
Nu gaan we testen of de footer ook onder de inhoud van onze pagina blijft staan, indien de inhoud langer is dan het venster. Om dit te kunnen zien zetten we wat tekst in de div 'pageInner'. Je HTML-pagina moet er nu vergelijkbaar uitzien:
<div id="page">
<div id="pageInner">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
semper nisi. Aenean vulputate eleifend tellus.</p>
</div><!-- /pageInner -->
</div><!-- /page -->
<div id="footerInner">
Dit is de footer
</div><!-- /footerInner -->
</div><!-- /footer -->
Eens kijken wat we nu in de browser zien:
Okeeeeee! Dat lijkt dus helemaal nergens op: De scrollbalk is weer terug, we zien ineens weer een blauwe rand bovenin en de footer loopt gewoon dwars door de inhoud van de 'pageInner'-div heen. Op dit punt gaat duidelijk worden wat de divs 'pageInner' en 'footerInner' voor ons doen. Wat dan? Ga ik zo uitleggen, eerst de oplossing.
De oplossing is slechts 1 eigenschap, die we aan de div 'pageInner' gaan mee geven, namelijk 'float:left;'.
De totale CSS moet er nu zo uitzien:
html, body {
background-color:aqua;
height:100%;
margin:0;
padding:0;
}
#page {
background-color:lime;
min-height:100%;
}
#pageInner {
float:left;
}
#footer {
height:50px;
margin-top:-50px;
}
#footerInner {
background-color:fuchsia;
float:left;
width:100%;
height:50px;
}
En zie het resultaat:
 |
| Inhoud korter dan het browser-venster |
 |
| Inhoud langer dan het browser-venster |
Doe met je browser of met de inhoud wat je wilt, die footer staat altijd op de goede plaats!
Nu dan de verklaring van het waarom betreffende de divs 'pageInner' en 'footerInner'. Ik begin maar meteen met het vernietigen van alle magie: De footer staat helemaal niet netjes onder de rest van de pagina, maar gewoon altijd onderaan het browser-venster. Geef in je code de div 'footer' maar eens een achtergrondkleur en zie wat er gebeurt als de inhoud langer word dan het browser-venster ;-)
De uitleg:
De html-tag heeft een hoogte van 100%. Dat is, omdat html het hoogste element is en dus geen parent heeft, de totale hoogte van het browser-venster. De body heeft ook een hoogte van 100%. Dat is dus de totale hoogte van de parent en de parent is de html-tag (welke even hoog is als het totale browser-venster, dus de body is dat ook). Dan de div 'page', ook een hoogte van 100% en de parent van 'page' is de body-tag. Kortom, ook de div 'page' is even hoog als het browser-venster.
Dan plakken we de div 'footer' er aan vast. de footer valt buiten de div 'page', dus de hoogte van 'footer' moet worden opgeteld bij de hoogte van 'page'. Juist daarom verdwijnt 'footer' dus buiten beeld en moet je scrollen om m te zien. Dat heffen we op met het negatieve marge aan de bovenkant van de div 'footer'. We geven 'footer' een hoogte en trekken die hoogte vervolgens weer van de margin-top af. De footer schuift nu een stukje voor de div 'page' en valt nu dus binnen de 100% die de div 'page' hoog is, in plaats van erbuiten. De scrollbalk is weg en de footer staat keurig onderaan de pagina.
Dit werkt, zo lang als de inhoud van de pagina korter is dan het browser-venster. Zodra de inhoud langer wordt, kan je het vergeten...
De divs 'page' past zich, door zijn procentuele hoogte, alleen aan aan zijn parent. Alle andere aspecten (zoals inhoud) worden daarbij genegeerd. Overschrijd de inhoud die 100% die we hebben ingesteld, dan is dat jammer maar helaas, 100% is 100%. De div 'footer' komt direct na 'page' en zal om die reden dus altijd worden beïnvloed door de afmeting van 'page'.
Op dit punt gaan de divs 'pageInner' en 'footerInner' ingrijpen. Waar 'page' zich dus niks aantrekt van eventuele inhoud en gewoon eigenwijs de maten van het venster blijft aanhouden (en 'footer' daarin meeneemt), hebben 'pageInner' en 'footerInner' geen procentuele hoogte en zijn niet afhankelijk van elkaar (aangezien er van beide kanten nog een parent tussen zit). Zij zullen zich juist aanpassen aan hun inhoud, of we kunnen een vaste hoogte geven (in pixels of EMs).
In ons geval hebben we 'footerInner' een vaste hoogte gegeven, namelijk 50 pixels. 'pageInner' hebben we geen hoogte gegeven en die hoogte wordt dus bepaald door de inhoud. Op die manier betekend meer inhoud, meer hoogte en andersom.
'pageInner' kan op deze wijze onbeperkt uitrekken, wat betekend dat hij op een gegeven moment de footer gaat tegenkomen. De div 'footer' is volledig afhankelijk van 'page' die 100% hoog is, waardoor de div 'footer' achter de div 'pageInner' zal schuiven. Om deze reden kan je de div 'footer' geen achtergrond-kleur of inhoud geven, want we willen natuurlijk helemaal niet zien dat de footer achter de inhoud schuift.
daar hebben we dus de div 'footerInner' voor nodig. Deze is, in tegenstelling tot zijn parent 'footer', niet afhankelijk van de div 'page'. Om deze reden zal hij de hoogte van 100% dus negeren en zal hij dus onder het laagste element plaatsnemen, ongeacht de hoogte van dat element.
Mooi he? ;-)
