Question de pied de page collante

J'ai parcouru toutes les questions liées au "pied de page collant" et rien ne m'a aidé parce que mon div #content n'a pas toujours un contenu suffisant pour pousser le bas de page vers le bas, voici le code que j'ai utilisé pour obtenir cela, mais apparemment je A fait quelque chose de mal:

CSS:

/* FOOTER FIX */ html, body, div#container { height: 100%; } body > div#container { height: auto; min-height: 100%; } div#index_body { padding-bottom: 30px; } .footer { clear: both; position: relative; z-index: 10; height: 30px; margin-top: -45px; padding-top:15px; } .footer { color: #666; background-color:#F4F7FA; border-top:1px solid #E6E7E8; font-size:95%; text-align: center; } /* END FIX */ 

Voici un peu de HTML afin que vous sachiez comment tout cela ressemble,

HTML:

  <html> <body> <div id="container"> <div id="index_body"> </div><!--end index_body --> <div id="index_footer" class="footer"> </div><!--end footer --> </div><!--end container --> </body> </html> 

J'ai vraiment essayé millions de combinaisons avec de nombreux pieds de page collants et aucun d'entre eux ne fonctionne, certains fonctionnent lorsque le corps de l'index contient beaucoup d'images de texte seulement alors le pied de page se termine, mais quand il n'a pas beaucoup de contenu, laissez-vous dire le paragraphe 2 Tags et une image, le pied de page ne colle pas. Peut-être cela n'est-il pas possible avec juste css, car la hauteur index_footer n'est pas corrigée? Existe-t-il un moyen de le faire avec javascript ou quel est le bon moyen de le faire? à votre santé

EDIT: Ma résolution d'écran est vraiment grande peut-être que c'est le problème c'est 1680 x 1050

Essayez de déplacer votre div dans le pied de page à l'extérieur du conteneur div. Votre technique devrait alors fonctionner. La façon dont vous l'avez configuré au moment où le pied de page se trouve dans le div divisé, mais positionné relativement. Donc, même si le div divisé peut avoir 100% de hauteur, le div. Du pied de page à l'intérieur de celui-ci n'est encore que juste au-dessous du contenu contenu dans le conteneur.

Un exemple rapide de ce que je veux dire, notez qu'un extra div avec un padding-bottom est requis afin de s'assurer que le pied de page ne chevauche pas le contenu )

 <html> <head> <title>Sticky Footer Test</title> <style> html, body { height: 100%; padding: 0px; margin: 0px; } * { margin: 0px; } #container { min-height: 100%; height: auto !important; height/**/: 100%; /* for IE6 */ background: #ddd; } #footer { position: relative; background: #555; margin-top: -100px; height: 100px; } #content { padding-bottom: 100px; } </style> </head> <body> <div id="container"> <div id="content"> <p>Hello! I'm some content!</p> </div> </div> <div id="footer"> <p>Hello! I'm a footer!</p> </div> </body> </html> 

Si vous ne pouvez pas déplacer le pied de page à l'extérieur du conteneur (pour quelque raison que ce soit), vous pouvez également essayer de placer le pied de page absolument dans le div divisé pour être en bas. position: absolute; bottom: 0px; etc

Par exemple, ( encore une fois, un extra div avec un padding-bottom est requis afin de s'assurer que le pied de page ne se chevauche pas le contenu ),

 <html> <head> <title>Sticky Footer Test 2</title> <style> html, body { height: 100%; padding: 0px; margin: 0px; } * { margin: 0px; } #container { position: relative; min-height: 100%; height: auto !important; height/**/: 100%; /* for IE6 */ background: #ddd; } #footer { position: absolute; bottom: 0px; width: 100%; background: #555; margin-top: -100px; height: 100px; } #content { padding-bottom: 100px; } </style> </head> <body> <div id="container"> <div id="content"> <p>Hello! I'm some content!</p> </div> <div id="footer"> <p>Hello! I'm a footer!</p> </div> </div> </body> </html> 

Je sais que cela ne répond pas à votre question exacte, mais le travail effectué par Ryan Fait m'a très bien fonctionné sur plusieurs navigateurs. Vous voudrez peut-être essayer (ou jeter un oeil à ce qu'il a fait par rapport à ce que vous faites et voir si vous pouvez déterminer un correctif).

Je crois que la racine du problème est que l'élément de bas de page dans le HTML doit être à l'extérieur de la division #container. Aussi, j'ai remarqué, après avoir supprimé cela, des problèmes de marge et de rembourrage sur l'étiquette du corps. Enfin, le bord supérieur sur le .footer rend la hauteur du pied de page 46px, pas 45px …

Le CSS corrigé:

 /* FOOTER FIX */ html, body, div#container { height: 100%; } body > div#container { height: auto; min-height: 100%; } div#index_body { padding-bottom: 30px; } body{margin:0;padding:0;} #container{ margin-bottom: -46px; } .footer { clear: both; position: relative; z-index: 10; height: 30px; padding-top:15px; color: #666; background-color:#F4F7FA; border-top:1px solid #E6E7E8; font-size:95%; text-align: center; } /* END FIX */ 

Le code HTML corrigé:

 <html> <body> <div id="container"> <div id="index_body"> </div><!--end index_body --> </div><!--end container --> <div id="index_footer" class="footer"> </div><!--end footer --> </body> </html> 

C'est en fait simple, voici le modèle minimal requis:

 <!doctype html> <html lang="en"> <head> <title>SO question 1980857</title> <style> html, body { margin: 0; height: 100%; } #container { position: relative; min-height: 100%; } * html #container { height: 100%; /* This is min-height for IE6. */ } #footer { position: absolute; bottom: 0; } #footer, #pushfooter { height: 50px; /* Both must have the same height. */ } </style> </head> <body> <div id="container"> <div id="content">Content</div> <div id="pushfooter"></div> <div id="footer">Footer</div> </div> </body> </html> 

Le fait de rendre le conteneur relative et de lui donner une min-height va effectivement coller le pied de page à son fond tout le temps indépendamment de la hauteur réelle du contenu, ce qui était votre principale préoccupation, comme cela a été compris par les commentaires.

En sortant de Harmen, j'ai testé ceci et ça marche, avec le pied de page dans le conteneur. Tout comme c'est un petit hack

CSS

 html, body, div#container { height: 100%; } body > div#container { height: auto; min-height: 100%; } div#index_body { min-height: 100%; margin-bottom: -46px; } .footer, .push { height: 30px; } .footer { clear: both; position: relative; z-index: 10; margin: 0px; } .footer { color: #666; background-color:#F4F7FA; border-top:1px solid #E6E7E8; font-size:95%; text-align: center; } /* END FIX */ 

Html

 <body> <div id="container"> <div id="index_body"> <div class="push"></div><!--Used to force the footer down to avoid overlap of footer and text --> </div><!--end index_body --> <div id="index_footer" class="footer"> </div><!--end footer --> </div><!--end container --> </body> 

Afin de réaliser un pied de page collant, c'est un pied de page placé dans une position fixe en bas de la page Web qui ne bouge pas lorsque vous faites défiler la page, vous pouvez utiliser ce code css:

 #footer{ position:fixed; clear:both; } 

Position: fixe rend le pied de page collant de toute façon, il pourrait y avoir des problèmes flottants si vous avez utilisé le flotteur: gauche ou flottant: directement dans votre code avant, donc en utilisant aussi clairement: il efface le flotteur et s'assure que le pied de page se trouve en bas sous d'autres divs Et non à gauche ou à droite du précédent div.

Cela fonctionnera, quelle que soit la hauteur du #container:

CSS:

  html, body { height: 100%; } #container { min-height: 100%; height: auto !important; height: 100%; margin-bottom: -50px; position: relative; } #index_footer { height: 50px; line-height: 50px; position: relative; background: #CCC; } #push { height: 50px; } 

HTML:

 <div id="container"> <div id="index_body"> test </div> <div id="push"> </div> </div> <div id="index_footer" class="footer"> test </div>