Pied de page collant sur un site avec 100% de hauteur

J'essaie d'obtenir un pied de page collant sur une page avec 100% de hauteur dans chaque tag. Mon problème est que, si le contenu est plus grand que l'affichage et que je défile vers le bas, le pied de page n'est plus au bas de la page. Le pied de page reste à la position comme celui-ci: Picture of the footer Pied de page collant sur un site avec 100% de hauteur

est un exemple: (Désolé c'était le mauvais lien ..) http://jsfiddle.net/qt3m1p4c/

<html style:"height: 100%"> 
    <body style:"height: 100%"> 
     A lot of Content 
    </body> 
    <footer style:"position: absolute; bottom: 0;"> 
     Sticky Footer 
    </footer> 
</html>

Quelqu'un pas comment résoudre ce problème, sans enlever la hauts attributs?

Source

2017-06-04 Marco Göpfrich

La position: fixe pour le pied de page. – Gerard

Vous devez définir la position: fixe à votre pied de page, cela signifie quoi qu'il arrive sur votre page, cet élément se tiendra dans un même lieu, here your code with changed position

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

Source

2017-06-04 16:37:56

Mais maintenant le pied de page est devant une partie du texte .. –

@ MarcoGöpfrich oui, pour résoudre cela, spécifiez une certaine hauteur à votre pied de page, et ajoutez un padding égal à cette valeur à votre wrapper :) –

Mettre le pied intérieur de l'enveloppe de contenu et de modifier le CSS comme suit:

.pageContentWrapper { 
    padding-bottom:100px; 
    min-height: 100%; 
    position: relative; 
    box-sizing: border-box; 
} 
.footer { 
    position: absolute; 
    [...] 
}

est ici un violon: (Edited, j'ai oublié d'ajouter box-sizing: border-box; au début): http://jsfiddle.net/uc6y5dhs/1/

Source

2017-06-04 16:41:57 Johannes

Pied de page collant sur un site avec 100% de hauteur

Répondre

Questions connexes