flottant pied toujours sur le fond et visible
j'ai un site web comme celui-ci: >> site web <<. Il est construit à partir de 2 cadres - main et un pied de page. J'essayais de le faire fonctionner sans montures (ne fonctionne pas sur les téléphones mobiles). Existe-t-il une méthode simple CSS ou jQuery pour coller le pied de page sur le fond pour être toujours visible? donc l'effet est comme sur le site web ci-dessus? J'essayais d'utiliser css, mais le pied de page n'apparaît que lorsque je fais défiler vers le bas. Je veux que le pied de page couvre le contenu réel, donc c'est toujours par exemple 50pixels de haut et est toujours visible sur le bas de l'écran. même si la page est haute de 10000px. Je crois que c'est quelque chose de simple, mais je me suis perdu quelque part là-bas. Merci pour votre aide d'avance
5 réponses
Oui. C'est le position: fixed propriété.
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
}
(function() {
$('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
Continuer sur de Sam Jones:
essentiellement ceci vérifie pour voir si la hauteur du document remplira la fenêtre, si elle est inférieure à la fenêtre, elle se fixera au bas de la fenêtre, si le document est plus grand que la taille de la fenêtre qu'elle fixera au bas du document (donc il n'est visible que 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>
nous pouvons même comparer les hauteurs et placer le pied de page en bas en utilisant le code ci-dessous.
$(document).ready(function(){
if($("body").height() < $(window).innerHeight()) {
$('#footer').css('position','fixed');
$('#footer').css('bottom',0);
}
});
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 de:
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 quand il pousse la fenêtre maintenant.