question pied collant

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

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 quelques 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é des millions de combinaisons avec de nombreux pieds collants et aucun ne fonctionne, certains d'entre eux fonctionnent lorsque le corps de l'index a des charges d'images de texte seulement alors le pied de page va vers la fin mais quand il n'a pas beaucoup de contenu disons 2 balises de paragraphe et une image le pied de page ne colle pas. Peut-être que ce n'est pas possible avec seulement css, parce que la hauteur index_footer n'est pas fixée? Y at-il un moyen de le faire avec javascript ou quelle est la bonne façon de le faire? acclamations

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

Source

2009-12-30 Gandalf StormCrow

J'utilise souvent http://www.digital-web.com/extras/positioning_101/css_positioning_example.php pour des problèmes comme ceux-ci car il a presque tous les exemples de positionnement que je peux penser et se dégrade avec élégance aussi – Alex

Je sais que cela ne répond pas à votre question exacte, mais le work done by Ryan Fait a travaillé très bien pour moi sur plusieurs navigateurs. Vous pourriez essayer (ou regarder ce qu'il a fait par rapport à ce que vous faites et voir si vous pouvez déterminer un correctif).

Source

2009-12-30 15:54:10 JasCav

Oh j'ai essayez ceci pour tant de fois, comme les combinaisons de zillion .. le problème est parce que quelquefois je n'ai pas assez de contenu dans mon récipient alors le pied de page ne colle pas, parfois j'ai trop de contenu et puis le pied colle au contenu au lieu bas et parfois j'ai juste assez pour le coller correctement, peut-être dans mon cas, j'ai besoin d'utiliser javascript –

Essayez de déplacer votre pied de page div à l'extérieur de la div. Votre technique devrait alors fonctionner. La façon dont vous l'avez défini au moment où le pied de page est dans le div contenant, mais positionné relativement. Donc, même si la div contenant peut avoir une hauteur de 100%, la div de pied de page à l'intérieur n'est toujours que juste en dessous du contenu du conteneur.

Un exemple rapide de ce que je veux dire, (Notez qu'une div supplémentaire avec certains padding-bottom est nécessaire pour 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 pouvez » t déplacez le pied de page à l'extérieur du conteneur (pour quelque raison que ce soit), vous pouvez également essayer de positionner le pied de page tout à fait dans le div contenant pour qu'il soit en bas. position: absolute; bottom: 0px; etc

Par exemple, (à nouveau, un div supplémentaire avec certains padding-bottom est nécessaire pour assurer que le pied de page ne 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>

Source

2009-12-30 16:20:05

C'est probablement ce que j'essayerais. –

Merci pour vos exemples, mais il y a une petite chose qui n'est pas bonne, quand vous redimensionnez la fenêtre, le pied de page chevauche le contenu. –

@Gandalf: Ah oui, je vois ce que tu veux dire. Vous devriez juste être en mesure d'envelopper le contenu dans un autre div et lui donner un remplissage de fond de 100px ;. Je vais mettre à jour la réponse en conséquence. –

je crois que la racine du problème est que l'élément footer dans le HTML doit être en dehors du div #container. En outre, j'ai remarqué après avoir enlevé cela, des problèmes avec la marge et le remplissage sur l'étiquette du corps. Enfin, le border-top sur le .footer fait la hauteur du footer 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>

Source

2009-12-30 16:23:32 jennyfofenny

-1

Cela fonctionne, quelle que soit la hauteur du #container est:

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>

Source

2009-12-30 16:23:40 Harmen

Mon html n'est pas comme ça je ne peux pas l'utiliser .. mon pied de page est dans le conteneur .. –

Going off Harmen, je l'ai testé et il fonctionne, avec le pied de page dans le récipient. altho il est un peu hackish

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>

Source

2009-12-30 16:37:01 Didius

Cela ne fonctionne pas du tout m8 –

Il est effectivement facile, voici le modèle minimum 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>

Faire la contiennent relative et en lui donnant un min-height va effectivement coller le pied de page à son fond tout le temps quelle que soit la hauteur réelle du contenu, ce qui était votre préoccupation majeure telle que comprise par les commentaires.

Source

2009-12-30 16:49:12 BalusC

ok il est en effet le pousser vers le bas du site mais il y a un espace vide ci-dessous, comment puis-je me débarrasser de cela? –

Je veux dire le scroller inutile si vous savez ce que je veux dire .. Je n'ai pas besoin d'avoir scroller du tout mais il appers à cause de l'espace vide vide ci-dessous footer –

Le défilement est causé par l'utilisation d'éléments avec des marges supérieures et inférieures des paddings à l'intérieur du '# container'. Les marges ne sont pas prises dans la hauteur, elles dépassent la hauteur. Vous devriez utiliser padding à la place. En outre, assurez-vous de définir les éléments suivants en CSS pour supprimer les marges par défaut: 'p, div {margin: 0;}'. Une fois de plus, copyposez l'exemple ci-dessus et exécutez-le. Vous ne verrez aucun scroller. Juste construire plus loin basé sur ce modèle. – BalusC

Afin de réaliser un pied de page collante, qui est un pied de page placé dans une position fixe au bas de la page Web qui ne se déplace pas lorsque votre faire défiler la page, vous pouvez utiliser ce code css:

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

position: fixe rend le pied collant de toute façon il pourrait y avoir des problèmes flottants si vous avez utilisé float: gauche ou float: droit dans votre code avant, donc en utilisant également clair: à la fois il efface le flottant et s'assure que le pied est en dessous divs et pas sur la gauche ou la droite du précédent div.

Source

2012-12-17 11:13:41 Fabio

Un peu d'explication rendrait notre réponse beaucoup mieux. –

@AnupCowkur terminé. Merci pour votre suggestion. J'ai répondu au même type de question posté par différentes personnes et j'ai oublié de donner une explication cette fois. De toute façon je le fais habituellement. J'espère que ma réponse peut aider beaucoup. – Fabio

question pied collant

Répondre

Questions connexes