Impossible de faire fonctionner le pied de page CSS Sticky. Qu'est-ce que je fais mal?

StackOverflow https://stackoverflow.com/questions/159487

  •  03-07-2019
  •  | 
  •  

Question

Eh bien, c’est mon premier article ici et je profite vraiment du site.

J'ai un site très basique (moche comme péché) que j'ai créé et, pour une raison quelconque, je ne parviens pas à faire fonctionner le pied de page CSS Sticky pour FireFox. IE fonctionne mais FF l’affiche à mi-hauteur de la page.

L'URL est http://dev.aipoker.co.uk

Je sais que je devrais développer dans FF et corriger des bogues dans IE, donc je suppose que j’ai peut-être commis une erreur et que cela fonctionne d’une manière ou d’une autre dans IE, mais nulle part ailleurs.

Quelqu'un peut-il m'aider à sortir de ma misère s'il vous plaît?

Merci les gars et les filles.

Était-ce utile?

La solution

Essayez cette une , elle fonctionne bien sous Firefox.

BTW, vous devriez écouter le podcast de Boagworld si vous ne le faites pas déjà. C'est brilliant! :)

A bientôt.

Autres conseils

J'ai eu du succès avec un code comme celui-ci: 

footer { 
  display: block; 
  position: absolute; 
  width: 100%; 
  bottom: 0px; 
}

Les changements minimaux que je peux voir pour ce faire seraient les suivants:

  • déplacez la section footerSection à l'intérieur du corps
  • définir la position absolue sur le corps et le pied de page
  • set bottom = 0px sur footerSection

qui se termine avec quelque chose comme ça dans votre tête: 

<style type="text/css">
  #body, #footerSection { position: absolute; }
  #footerSection { bottom: 0px; }
</style>

<div id="body">
   ...
   <div id="footerSection">
      ...
   </div>
</div>

C’est tout ce que vous devez savoir sur css, mais collant les pieds de page & amp; nav collant:

S'en tenir au bas de la page 

Position: absolute;
top:auto;
bottom: 0;

coller au bas de l'écran 

Position: fixed;
top:auto;
bottom:0;

Tout problème, probablement à cause de l'endroit où vous avez placé votre code html (ne faites pas du pied de page un élément enfant à moins qu'il ne colle au wrapper de contenu), ni de chevauchement de CSS.

Vous pouvez appliquer la même technique à la navigation difficile en faisant basculer la fonction auto & amp; Haut. Il est compatible avec tous les navigateurs (de la mémoire à partir de IE7 et des versions plus récentes), y compris les mobiles.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top