web-dev-qa-db-fra.com

Comment coller un pied de page au fond des CSS?

Je rencontre le problème classique du positionnement d’un pied de page au bas du navigateur. J'ai essayé des méthodes incluant http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ mais aucun résultat positif: mon pied de page continue d'apparaître au milieu de la fenêtre du navigateur. dans les deux FF et IE. 

Dans le HTML, j'ai cette structure simple

<form>
 ...
 <div class=Main />
 <div id=Footer />
</form>

Voici le code css pertinent pour le problème du pied de page css:

    *
    {
        margin: 0;
    }


html, body
{
    height: 100%;
}


    #Footer
    {
        background-color: #004669;
        font-family: Tahoma, Arial;
        font-size: 0.7em;
        color: White;
        position: relative;
        height: 4em;
    }



    .Main
    {
        position:relative;
        min-height:100%;
        height:auto !important;
        height:100%;

        /*top: 50px;*/

        margin: 0 25% -4em 25%;

        font-family: Verdana, Arial, Tahoma, Times New Roman;
        font-size: 0.8em;
        Word-spacing: 1px;
        line-height: 170%;
        /*padding-bottom: 40px;*/
    }

Où est-ce que je me trompe? J'ai vraiment tout essayé. Si j'ai manqué des informations utiles, s'il vous plaît faites le moi savoir.

Merci pour toute suggestion en avance.

Cordialement,

merci à tous pour vos réponses . cela a fonctionné avec:

position:absolute;
    width:100%;
    bottom:0px;

position de réglage: fixed ne fonctionnait pas dans IE pour une raison quelconque (le pied de page toujours affiché au milieu du navigateur), ne fonctionnait que pour FF.

csssticky-footer
38
Amc_rtty

Essayez de définir les styles de votre pied de page sur position:absolute; et bottom:0;.

43
Nick Larsen
#Footer {
  position:fixed;
  bottom:0;
}

Cela fera que le pied de page reste au bas de la fenêtre du navigateur, peu importe où vous faites défiler.

25
codedude
#Footer {
position:fixed;
bottom:0;
width:100%;
}

a travaillé pour moi

9
Sheikh Naveed
#footer{
position: fixed; 
bottom: 0;
}

http://codepen.io/smarty_tech/pen/grzMZr

4
Bhawna Malhotra

Je pense que beaucoup de gens recherchent un pied de page sur le fond qui défile au lieu d'être fixé, appelé un pied collant. Les pieds de page fixes couvriront le contenu du corps lorsque la hauteur est trop courte. Vous devez définir le conteneur html, body et page à une hauteur de 100%, définir votre pied de page en position absolue inférieure. Votre conteneur de contenu de page a besoin d'une position relative pour que cela fonctionne. Votre pied de page a une marge négative égale à la hauteur du pied de page moins la marge inférieure du contenu de la page. Voir la page d'exemple que j'ai postée.

Exemple avec notes: http://markbokil.com/code/bottomfooter/

3
mbokil

Cela a fonctionné pour moi:

.footer
{
  width: 100%;
  bottom: 0;
  clear: both;
}
1
rzskhr

Si vous utilisez la "position: fixed; bottom: 0;" votre pied de page apparaîtra toujours en bas et cachera votre contenu si la page est plus longue que la fenêtre du navigateur.

0
Chtiwi Malek

La propriété css suivante le fera

position: fixed;

J'espère que cette aide.

0
Abdelhameed Mahmoud