Pied de page collant avec redimensionnement de l'image attaché au pied de page

Question

Je travaille sur un site qui utilise la grille 960. Au bas du site, il y a un div entre le contenu de la page et le pied de page qui contient une image avec une largeur de 100%, donc il se redimensionne en fonction de la largeur du navigateur. Vous pouvez consulter une démo ici: http://redone.org/_dev/ski/menu2.html

Ce qui précède fonctionne très bien car le contenu est long. Cependant, sur les pages où le contenu est court, l'image et le pied de page se faufilent pour révéler l'espace indésirable entre le pied de page et le bas du navigateur (cliquez sur "MENU 1" dans le haut nav ou le logo dans le lien ci-dessus). Une fois sur la page d'accueil, redimensionnez pour voir le problème sous le pied de page.

Je voudrais utiliser une méthode similaire à la méthode CSS Sticky Footer (cssstickyfooterDOTcom).

J'ai du mal à résoudre ce problème en raison du redimensionnement de l'image (ce qui est souhaité). Je pense que je devrais utiliser jQuery pour mettre à jour la hauteur/offset du pied de page, à mesure que la hauteur de l'image change.

Toute aide serait grandement appréciée.

P.S. Désolé pour le lien bizarre ci-dessus. Je suis nouveau sur ce forum et ils me laisseront seulement poster un lien et aucune image pour expliquer visuellement mon problème.

Answer 1

Quelque chose comme ça devrait faire l'affaire. Placez le corps relatif afin que vous puissiez attacher le pied de page au fond. Même avec l'image. Maintenant, lorsque la hauteur de la fenêtre dépasse la hauteur du corps, réglez la hauteur du corps à la hauteur de la fenêtre afin que le pied de page reste en bas.

CSS

body   {position: relative} 
.footer   {position: absolute; bottom: 0px} 
.imgbackground {position: absolute; bottom: [footer height]} 

JS

$(window).resize(function() { 
    var winHeight = $(this).height(); 
    if(winHeght > $('body').height()) 
     $('body').height($(this).height()); // set the body height to the window height 
    else $('body').height('auto'); 
}).resize();