Comment stick <footer> élément au bas de la page (HTML5 et CSS3)?

Lorsque j'utilise la position relative sans contenu, pied de page, qui va jusqu', avec absolue avec beaucoup de contenu, pied de page va vers le bas, et avec fixe, il est toujours là.

Est-il un moyen facile d'obtenir à la fin de la page, indépendamment du contenu, se rétrécit et se développe avec le contenu?

Quand il y a beaucoup de contenu, nous pouvons voir le pied de page de la première page, et quand il y a peu de contenu, nous allons voir en bas.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html,body {
            padding: 0;
            margin: 0;
        }

        header {
            position:fixed;
            top:0;
            width:100%;
            height:40px;
            background-color:#333;
            padding:20px;
        }

        footer {
            background-color: #333;
            width: 100%;
            bottom: 0;
            position: relative;
        }
        #main{
            padding-top:100px;
            text-align:center;
        }
  </style>
</head>
<body>
    <header>
    header
    </header>

    <div id="main">
    main
    </div>

    <footer>
    footer
    </footer>
</body>
</html>
Ici, j'ai trouvé un bon exemple, mais l'ajout d'un lot de la fraction inutilisée du code css. twitter.github.io/bootstrap/examples/sticky-footer-navbar.html
ajouter display:inline-block pour le pied de page elle-même, - je l'utiliser dans des cas communs.

OriginalL'auteur Joe | 2013-04-12

  1. 26

    Pour le pied de page de changement de position: relative; à position:fixed;

     footer {
            background-color: #333;
            width: 100%;
            bottom: 0;
            position: fixed;
        }

    Exemple: http://jsfiddle.net/a6RBm/

    Mais avec beaucoup de contenu, il est toujours là jsfiddle.net/84LxZ
    twitter.github.io/bootstrap/examples/sticky-footer-navbar.html
    Exemple de lien déplacé: getbootstrap.com/examples/sticky-footer-navbar
    cela a fonctionné comme un charme pour moi!!!

    OriginalL'auteur

  2. 9

    Voici un exemple d'utilisation de css3:

    CSS:

    html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

    HTML:

    <div id="wrap">
    body content....
</div>
<footer class="footer">
    footer content....
</footer>

    jsfiddle

    Mise à jour

    @Martin pointu, la position relative n'est pas obligatoire sur le .footer élément, de même que pour clear:both. Ces propriétés ne sont là qu'à titre d'exemple. Donc, le minimum de css nécessaire de coller le pied de page sur le fond devrait être:

    html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}

    Aussi, il y a un excellent article à css-tricks montrant les différentes façons de le faire: https://css-tricks.com/couple-takes-sticky-footer/

    Êtes-vous sûr que position: relative est nécessaire sur le pied de page? Votre solution fonctionne très bien, raison de la hauteur. Mais je pense que position: relative sur le pied de page n'est pas nécessaire. Il ne serait nécessaire, si le pied de page de l'élément a de certains sous-élément en dessous avec position: absolute, et vous avez voulu placer ce sous-élément par rapport à la page.
    le position: relative n'est pas obligatoire, même pour clear: both et la padding sur le #wrap élément. J'ai mis ces propriétés comme un exemple d'un minimum la structure d'une page HTML. Merci pour la remarque, je vais mettre à jour la réponse.

    OriginalL'auteur Victor

  3. 7

    Je voudrais utiliser ce en HTML 5... Just sayin

    #footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}
    positionnement absolu prend un élément (ici: le pied de page) du document de flux, donc si vous avez beaucoup de contenu à la verticale, le pied de page sera placé au-dessus de ce contenu

    OriginalL'auteur Omar

  4. 0

    juste mis position: fixed pour le pied de page de l'élément (au lieu de relative)

    Jsbin exemple

    Notez que vous pouvez aussi avoir besoin de définir un margin-bottom à la main élément au moins égale à la hauteur du pied de page de l'élément (par exemple,margin-bottom: 1.5em;) sinon, dans certains circustances, le fond de la zone de contenu principal pourrait être partiellement recouvertes par votre pied de page

    Mais avec beaucoup de contenu, il est toujours là jsfiddle.net/84LxZ
    twitter.github.io/bootstrap/examples/sticky-footer-navbar.html

    OriginalL'auteur fcalderan