web-dev-qa-db-fra.com

pied de page flottant toujours sur le fond et visible

J'ai un site Web comme celui-ci: >> site Web << . Il est construit à partir de 2 cadres - principal et un pied de page. J'essayais de le faire fonctionner sans cadres (ne fonctionne pas sur les téléphones mobiles). Existe-t-il une méthode CSS ou jQuery simple pour coller le pied de page en bas pour être toujours visible? donc l'effet est comme sur le site ci-dessus? J'essayais d'utiliser css, mais le pied de page n'apparaît que lorsque je le fais défiler. Je veux que le pied de page couvre le contenu, il est donc toujours élevé, par exemple, de 50 pixels et est toujours visible en bas de l'écran. même si la page est haute 10000px. Je crois que c'est quelque chose de simple, mais je me suis perdu quelque part là-bas. Merci d'avance pour votre aide

css-floatfootersticky-footer
24
Piotr Ciszewski

Oui. C'est la propriété position: fixed.

.footer {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

Démo: http://jsfiddle.net/ZsnuZ/

47
Christian Varga
(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
3
Sam Jones

Continuant de Sam Jones:

En gros, cela vérifie si la hauteur du document remplira la fenêtre, si elle est inférieure à la fenêtre, elle s’attachera au bas de la fenêtre, si le document est plus grand que la taille de la fenêtre, il s’attachera au bas de la fenêtre. le document (il n'est donc visible que lorsque vous faites défiler l'écran vers le bas).

Si vous redimensionnez la fenêtre, elle sera recalculée et tout devrait fonctionner correctement!

CSS

#footer {
  bottom: 0px;
}

HTML

<div id="footer">
  Footer content
</div>
<script>
  var footerResize = function() {
    $('#footer').css('position', $("body").height() + $("#footer").innerHeight() > $(window).height() ? "inherit" : "fixed");
  };
  $(window).resize(footerResize).ready(footerResize);
</script>
1
FuzzyJulz

Nous pouvons même comparer les hauteurs et définir le pied de page en bas à l'aide du code ci-dessous.

 $(document).ready(function(){
    if($("body").height() < $(window).innerHeight()) {
                    $('#footer').css('position','fixed');
                    $('#footer').css('bottom',0);
    }
 });
0
brax7