CSS Sticky Footers - deux barres de défilement horizontales?

Question

J'utilise le didacticiel CSSStickyFooter.com dans ma tentative imparfaitement amateur d'obtenir un pied de page collant parfait.

Ceci est une question spécifique concernant le style overflow:auto; sur la div "principale". Avec ceci en place, et quand la fenêtre est rétrécie par l'utilisateur, j'obtiens une barre de défilement horizontale à mi-chemin de ma page. Cette barre de défilement ajoutée ne peut-elle pas apparaître automatiquement au bas de la fenêtre comme elle le devrait?

Answer 1

La raison pour laquelle vous obtenez la barre de défilement dans un endroit impair est parce que c'est sur le <div> plutôt que sur la page. Ceci est le résultat de l'utilisation de overflow:auto;.

overflow:auto; indique à CSS que vous voulez que ce <div> particulier obtienne des barres de défilement (horizontales ou verticales) lorsqu'il est trop petit pour afficher tout son contenu.

Par conséquent, la réponse directe à votre question est Non; vous ne pouvez pas positionner la barre de défilement ailleurs sur la page, car elle est attachée au <div>.

Cependant, il peut y avoir des façons de contourner cela. Tout d'abord, si cela ne vous dérange pas que le contenu soit coupé lorsque l'affichage est étroit, vous pouvez définir les barres de défilement de manière à ce qu'elles ne soient horizontales que pour le contenu vertical. Vous pourriez faire quelque chose comme ceci:

overflow-y: scroll; 
overflow-x: hidden; 

Vous pouvez également utiliser d'autres méthodes pour corriger votre code; CSSStickyFooter.com est très bien connu, donc si cela fonctionne pour les autres sans ce pépin, il peut probablement être fait pour travailler pour vous aussi. Mais nous aurions besoin de voir un peu plus de votre code pour vous aider à aller plus loin dans cette ligne.

Answer 2

je l'ai étudié et essayé de nombreuses techniques de pieds de page collantes et trouvé celui-ci pour travailler grand:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

J'ai eu des problèmes avec beaucoup d'autres techniques que j'ai utilisé avant que celui-ci. Si l'utilisation de CSSStickyFooter.com n'est pas une exigence stricte pour votre projet, je vous recommande d'utiliser la technique décrite dans le lien auquel j'ai fait référence.