flottant pied toujours sur le fond et visible

J'ai un site web comme celui-ci: >> site <<. Il est construit à partir de 2 images - main et un pied de page. J'ai essayé de le faire fonctionner sans les images (ne fonctionne pas sur les téléphones mobiles). Est-il un simple CSS ou jQuery méthode pour coller le pied de page sur le bas pour être toujours visible? donc l'effet est comme sur le site web ci-dessus? J'ai essayé d'utiliser le css, mais le pied de page s'affiche uniquement lorsque je scroll vers le bas. Je veux le pied de page de couverture, le contenu réel, il est donc toujours par exemple 50pixels de haut et est toujours visible sur le bas de l'écran. même si la page est 10000px élevé. Je crois que c'est quelque chose de simple, mais je me suis perdu quelque part par là. Je vous remercie pour votre aide à l'avance

  • position: fixed; bottom: 0; left: 0; right: 0; height: 50px?
  • Certains mobiles, c'est à dire les anciennes versions d'iOS, ne respectent pas les fixed de la propriété. Mais lui donner un aller, de toute façon 🙂
InformationsquelleAutor Piotr Ciszewski | 2012-11-28
  1. 50

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

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

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

    • va vérifier sur iOS maintenant.
    • sur mon android il gèle dans la position bizarre, alors j'ai faites défiler vers le bas et il reste dans le milieu de l'écran... des idées?
    • position: fixed; est de savoir comment vous faites l'élément rester en place lorsque vous faites défiler.
    • l'ensemencement sur milieu de l'écran, android 8 chrome
    • Il reste fixe, mais si votre contenu est plus grand que la fenêtre d'affichage, le fond 50px du contenu est caché par le pied de page
    InformationsquelleAutor Christian Varga
  2. 3
    (function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
    InformationsquelleAutor Sam Jones
  3. 1

    Continuant sur Sam Jones:

    Fondamentalement cette fonction vérifie si la hauteur du document de remplir la fenêtre, si elle est inférieure à la fenêtre, il s'attache à la partie inférieure de la fenêtre, si le document est plus grand que la taille de la fenêtre qui va s'attacher à la fin du document (c'est uniquement visible lorsque vous faites défiler vers le bas).

    Si vous redimensionnez la fenêtre, il va recalculer 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>
    • Parfait pour mon exigence: afficher le pied de page lorsque le contenu est court, et le mettre en bas lorsque le contenu est plus longue que la fenêtre de
    InformationsquelleAutor FuzzyJulz
  4. 0

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

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

    Pour moi cela fonctionne mieux, parce que la hauteur du corps comprend le pied de page lorsque la position est statique ou d'hériter:

       var footerResize = function() {
            if ($('#footer').css('position') == "fixed")
                $('#footer').css('position', $("body").height() + $("#footer").height() > $(window).innerHeight() ? "inherit" : "fixed");
            else
                $('#footer').css('position', $("body").height() > $(window).innerHeight() ? "inherit" : "fixed");

    };

    Il reste sur le fond lors de la croissance de la fenêtre maintenant.

    InformationsquelleAutor Jeroen