Table des matières
Niveau
..........
En rapport...

Pied de page (footer)

La technique des pieds de page en CSS aillant ses limites, voici comment gérer les pieds de page en javascript.

Structure du fichier html

html4strict
<div id="content">...</div>
<div id="footer">...</div>

Le div nommé “content” devra contenir la totalité de votre page excepté le footer.

Fonctions

Fonction getWindowHeight

javascript
function getWindowHeight() {
    var windowHeight=0;
    if (typeof(window.innerHeight)=='number') {
        windowHeight=window.innerHeight;
    }
    else {
     if (document.documentElement&&
       document.documentElement.clientHeight) {
         windowHeight = document.documentElement.clientHeight;
    }
    else {
     if (document.body&&document.body.clientHeight) {
         windowHeight=document.body.clientHeight;
      }
     }
    }
    return windowHeight;
}

Cette fonction permet de déterminer la taille de la fenêtre du navigateur.

Fonction setFooter

javascript
function setFooter() {
    if (document.getElementById) {
        var windowHeight=getWindowHeight();
        if (windowHeight>0) {
            var contentHeight=
            document.getElementById('content').offsetHeight;
            var footerElement=document.getElementById('footer');
            var footerHeight=footerElement.offsetHeight;
        if (windowHeight-(contentHeight+footerHeight)>=0) {
            footerElement.style.position='relative';
            footerElement.style.top=
            (windowHeight-(contentHeight+footerHeight))+'px';
        }
        else {
            footerElement.style.position='static';
        }
       }
      }
}

Cette fonction lancera la fonction getWindowHeight puis placera le footer en conséquence.

window.onload

javascript
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}

Ces deux fonctions permettent d'appeler setFooter lorsque votre page est :

De cette façon, votre footer se placera toujours au bon endroit.

Sur le même sujet

pied de page en CSS : cet article explique comment obtenir un pied de page en pur CSS

Source

Source


13/06/2006 15:26 -

ManiT4c
Gérant et chef de projet de l'agence web Op'art, je suis également webmaster freelance. Retrouvez moi également sur twitter.