web-dev-qa-db-fra.com

Comment coller l'élément <footer> en bas de page (HTML5 et CSS3)?

Lorsque j'utilise la position relative sans contenu, le pied de page monte, avec absol avec beaucoup de contenu, le pied de page descend et avec fixe il est toujours là.

Existe-t-il un moyen facile d'accéder à la fin de la page indépendamment du contenu, de se réduire et de croître avec le contenu?

Lorsqu'il y a beaucoup de contenu, nous pouvons voir le pied de page dans la première page, et quand il y a peu de contenu, nous le verrons 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>
html5css3coding-stylestylesfooter
19
Joe

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

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

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

27
user1317647

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
Comme l'a souligné @Martin, la "position: relative" n'est pas obligatoire sur le .footer élément, idem pour clear:both. Ces propriétés ne sont là qu'à titre d'exemple. Ainsi, le css minimum nécessaire pour coller le pied de page en bas 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 */
}

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

8
Victor

Je l'utiliserais en HTML 5 ... Disons simplement

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}
6
Omar

il suffit de définir position: fixed à l'élément de pied de page (au lieu de relatif)

exemple Jsbin

Notez que vous devrez peut-être également définir un margin-bottom à l'élément main au moins égal à la hauteur de l'élément pied de page (par exemple margin-bottom: 1.5em;) sinon, dans certains cas, la zone inférieure du contenu principal pourrait être partiellement chevauchée par votre pied de page

0
fcalderan