Différence entre les implémentations de pied de page collant CSS?

J'ai trouvé 2 implémentations différentes d'un pied de page collant CSS:Différence entre les implémentations de pied de page collant CSS?

Ryan Fait footer collant - http://ryanfait.com/sticky-footer/
Steve Hatcher Pied de page collant - http://www.cssstickyfooter.com/

Quelqu'un pourrait-il expliquer la différence entre la façon dont chacun d'eux fonctionne?

Et s'il y a d'autres implémentations connues, pourriez-vous s'il vous plaît poster un commentaire ou éditer cette question?

Source

2011-04-21 coffee-grinder

Ils sont assez similaires en termes de fonction. Le premier force un div à la hauteur totale de la page et lui donne ensuite une marge négative de la taille du pied de page.

html, body { 
    height: 100%; /*set 100% height*/ 
} 
.wrapper { 
    min-height: 100%; /*content 100% height of page */ 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* negative value causes wrappers height to become (height of page) minus 142px, just enough room for our footer */ 
} 
.footer, .push { 
    height: 142px; /*Footer is the footer, push pushes the page content out of the footers way*/ 
}

Ce que cela fait est fait en sorte que tout le contenu de la div d'emballage est 100% de la hauteur de la page moins la hauteur du pied de page. Donc, tant que le pied de page est de la même taille que la marge négative, il restera dans l'espace restant et apparaîtra au bas de l'élément. La seconde force également le contenu à 100% de la hauteur de la page. Il crée ensuite un espace au bas du contenu principal de la même taille que le pied de page.

#main {overflow:auto; 
padding-bottom: 150px;} /* wrapper still 100% height of screen but its content is forced to end 150px before it finishes (150px above bottom of screen) */

Ensuite, en utilisant la position relative et une marge supérieure négative oblige le pied à apparaître 150px au-dessus de sa position normale (dans l'espace, il vient de faire).

#footer {position: relative; 
margin-top: -150px; /* Make footer appear 150px above its normal position (in the space made by the padding in #main */ 
height: 150px; 
clear:both;}

Note: Cela ne fonctionne que tant que le contenu de la page est maintenue dans .wrapper et #main à l'intérieur #wrap respectivement, et votre pied de page est en dehors de ces conteneurs.

Si vous n'avez pas compris une partie de cela laissez-moi un commentaire et je vais essayer d'y répondre.

Edit: En réponse à user360122

balisage HTML pour la première:

<html> 
<body> 
<div class="wrapper"> 
<!--Page content goes here--> 
<div class="push"> 
<!--Leave this empty, it ensures no overflow from your content into your footer--> 
</div> 
</div> 
<div class="footer"> 
<!--Footer content goes here--> 
</div> 
<body> 
</html>

balisage HTML pour la deuxième:

<html> 
<body> 
<div id="wrap"> 
<div id="main"> 
<!--Page content goes here--> 
</div> 
</div> 
<div id="footer"> 
<!--Footer content goes here--> 
</div> 
</body> 
</html>

Souvenez-vous d'inclure la feuille de style et de déclarer doctype .etc (Ce ne sont pas des pages html complètes).

Source

2011-04-21 15:35:08

Bonne réponse George – David

Salut George, avez-vous le balisage HTML s'il vous plaît? Merci beaucoup. – HorseKing

Mis à jour avec le balisage html –

Il est un exemple dans la documentation d'amorçage qui semble être très simple: http://getbootstrap.com/examples/sticky-footer/

Aucun emballage ou pousser nécessaire.

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 60px; 
} 
#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
}

Source

2014-06-24 15:56:53

Ne fonctionne pas dans IE7. Pensez à celui qui utilise un push-div fonctionne mieux traverser les navigateurs et complètement sans js. – sasha

Différence entre les implémentations de pied de page collant CSS?

Répondre

Questions connexes