CSS Sticky Footer - que se passe-t-il si vous avez placé des divs sur la page?

J'utilise cette solution, qui a travaillé pour moi avant:CSS Sticky Footer - que se passe-t-il si vous avez placé des divs sur la page?

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

Je travaille actuellement sur un site, et il ne fonctionne pas. Je pense que c'est parce que j'utilise une position absolue sur certains divs sur la page. Au lieu de coller au bas de la page, le pied de page apparaît sous l'en-tête, au-dessus des divs absolument positionnés. Comment puis-je obtenir un pied de page collant pour travailler dans cette situation?

<div id="wrap"> 
     <div id="container"> 

      <div id="myDiv"> 
       ...content... 
       ... this div is absolutely positioned 
      </div><!-- END aboutText --> 

     </div><!-- END container --> 
    <div class="push"></div> 

</div><!-- END wrap --> 
<div id="footer"> 
    ...footer content 
</div>

En fait, il travaille maintenant. Je ne sais pas pourquoi - un de ces mystères CSS. Voici une question connexe: - Comment définir une hauteur de navigateur minimale, de sorte que lorsque quelqu'un redimensionne le navigateur (le rendant plus petit), le pied de page cesse-t-il de monter et de couvrir le contenu?

Modifier - voici le CSS. Le pied de page colle bien au fond, mais il couvre les divs de contenu sur la page si la fenêtre du navigateur est petite.

html, body { 
    height: 100%; 
} 


#wrap{ 
    width:950px; 
    margin: 0 auto -80px; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 

} 


.push { 
    height: 80px; 

} 

#footer{ 
    height: 80px; 
    background-image:url(../images/img.jpg); 

} 

#container{ 
    position:relative; 
} 



#someDivWithinTheContainer{ 
    position:absolute; 
    left:230px; 
    top:300px; 
}

Source

2009-09-21 sol

Ceci est une question CSS. Pouvez-vous poster des CSS pertinents? –

S'il vous plaît modifier votre question avec des détails pertinents au lieu d'afficher des détails supplémentaires dans une «réponse» comme vous l'avez fait ci-dessous. –

La réponse correcte est la position corrigée, sauf que IE6 ne prend pas en charge cette propriété.

Source

2009-09-21 01:28:33

Voici ce que j'utilise pour coller le pied de page en bas. Avec cette méthode, le pied de page ne chevauche jamais le contenu, peu importe la taille de la fenêtre. Si vous l'éditez, assurez-vous que le padding-bottom sur le div #body est supérieur à la hauteur du div #footer - c'est ce qui empêche le chevauchement. Je n'ai pas de pages avec un contenu absolument positionné, donc je ne sais pas comment ça se comporte avec ça; pour le contenu flottant, vous avez naturellement besoin d'un bloc de compensation après, sinon le div #body diminue.

CSS:

html, body {margin:0;padding:0;height:100%;} 
#container {min-height:100%;position:relative;} 
#body {padding:10px;padding-bottom:2em;zoom:1;} 
#footer {position:absolute;bottom:0;width:100%;height:1em;}

html:

<body> 
    <div id="container"> 
    <div id="body"> 
     (body contents) 
    </div><!-- #body --> 
    <div id="footer"> 
     <p>(footer text)</p> 
    </div><!-- #footer --> 
    </div><!-- #container --> 
</body>

Et puis de fixer IE6, ajouter un commentaire conditionnel:

<!--[if lt IE 7]> 
<style type="text/css"> 
#container {height:100%;} 
</style> 
<![endif]-->

Il est également important d'avoir une déclaration DOCTYPE afin IE sera en mode standard, pas en mode quirks.

Source

2009-09-30 22:06:49 Martha

Fixe un élément par rapport au cadre de la fenêtre, en ignorant le défilement qui se produit dans le corps de la page.

Les gens vont parfois utiliser l'absolu parce qu'il est similaire, mais différent. L'un des plus grands malentendus à propos de «absolu» est qu'il est absolument positionné dans une page (au moins en fonction de toutes les personnes que j'ai interviewé récemment). Ce n'est pas. Absolue signifie que l'élément est positionné absolument dans son élément "positionné" le plus proche - tout élément qui n'a pas "position: static" (valeur par défaut). Si vous ne placez rien d'autre, alors c'est le corps, comme vous vous y attendez. Une fois que vous commencez à utiliser la position, vous allez changer ce à quoi l'élément est relatif. Je soupçonne que c'est ce que vous avez rencontré dans

Source

2009-10-05 14:33:39 ndp

CSS Sticky Footer - que se passe-t-il si vous avez placé des divs sur la page?

Répondre

Questions connexes