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

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

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

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.

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 = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}

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

• Re-dimensionné
• ou complètement chargée.

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

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

Source

13/06/2006 15:26 -