CSS sticky footer with margin-top on main wrapper (pied de page collant avec marge supérieure sur l'enveloppe principale)

Question

J'ai utilisé http://ryanfait.com/sticky-footer/ et cela fonctionne très bien jusqu'à ce que vous ayez besoin d'une marge ou d'un intercalaire en haut de la page. Le design sur lequel je travaille a un corps à motifs et tout le contenu de la page est dans une boîte blanche qui commence à 15px du haut. J'ai toujours besoin d'un pied de page qui colle au bas de la page, quel que soit le navigateur. Des idées ?

UPDATE :

Merci pour toutes les idées, mais la notation fonctionne parfaitement. L'ajout d'une marge à un sous-élément de l'enveloppe fait apparaître un barre de défilement inutile : Exemple de travail : http://jsfiddle.net/cronoklee/p2cPD/

Answer 1

Si vous êtes prêt à abandonner le pied de page collant que vous utilisez, voici comment je procéderais pour en créer un à partir de zéro.

HTML

<div class="wrapper">
    <div class="content">
        ... Your Content Here ...
    </div>
</div>
<div class="footer">
    ... Your Footer Here ...
</div>

CSS

.wrapper {
    background: #eee;
    padding: 15px 0 100px;
}

.content {
    background: #fff;
}

.footer {
    background: #ccc;
    bottom: 0;
    height: 100px;
    left: 0;
    position: fixed;
    right: 0;
}

Cela devrait fonctionner quel que soit le navigateur. La seule nuance dont il faut tenir compte est que position: fixed ne fonctionne pas dans IE 6. Toute amélioration est la bienvenue :)

Answer 2

Pourriez-vous appliquer une marge supérieure au corps ?

body{
margin-top:15px;
}

Cela fonctionne avec firebug sur la page que vous avez linkée.

Answer 3

Une solution sans ajouter de barre de défilement. Effectuez les ajustements suivants :

.header{
height:168px; /*15px + image height*/
image-position:bottom;
margin-bottom:37px;
}

.download{
top:175px;
}

Answer 4

Je viens de trouver ce fil de discussion car j'ai eu le même problème il y a dix minutes et j'aimerais partager ma solution au problème avec ". barre de défilement inutile causée par un pied de page décalé verticalement vers le bas causé par mon header-div avec margin-top : 20px, parce que je veux juste qu'il soit à 20px du haut de la page "que j'ai trouvée entre-temps.

Juste modifier votre .content{margin-top:15px;} a .content{padding-top:15px;} et cela devrait fonctionner. La barre de défilement doit disparaître et le contenu doit être à la même distance du haut.

Comme vu ici : http://jsfiddle.net/p2cPD/24/

Oui, cela élargira l'arrière-plan du content-div, mais si vous ne voulez pas qu'il soit là, vous pouvez le faire en utilisant une sorte de png transparent ou autre.

Par ailleurs, selon la http://ryanfait.com les <div class="push"></div> devrait se trouver à la fin, à l'intérieur du wrapper-div et après le content-div, et non à l'intérieur du content-div.