web-dev-qa-db-fra.com

CSS & HTML5: Placez un <footer> au bas de la page? pas d'emballage?

le problème séculaire. Je dois positionner un élément <footer> au bas de la page. Cependant, je n'ai pas de div wrapper.

J'ai la structure suivante…

<body>
<header>
<section id="content">
<footer>
</body>

Existe-t-il un moyen simple de pousser le pied de page vers le bas si le contenu n’est pas assez haut?

htmlcsshtml5footer
12
matt

Autant que je sache, c’est toujours le meilleur moyen d’obtenir un pied de page qui reste au bas de la page:

http://www.themaninblue.com/experiment/footerStickAlt/

1
Karl

Entré par cette question, et pensais que je posterais ce que j'ai rencontré. Cela semble être le moyen idéal pour moi.

CSS:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

HTML5:

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

Tout le crédit va à http://mystrd.at/modern-clean-css-sticky-footer/

15
Trace DeCoy

Faites-le position: fixed; bottom: 0, height: xxx? Bien entendu, tout contenu se chevaucherait si la page dépassait le bas de la fenêtre. Peut-être que certains JS détecteront le contenu "court" et définir css comme il convient.

10
Marc B

En fonction de votre code, cela peut ne pas fonctionner, mais je suggérerais de définir votre body sur position:relative;, puis de définir footer sur position:absolute; et bottom:0. En théorie, les choses ne se chevaucheront pas.

2
jezza-tan

Voici une solution qui fonctionne très bien pour moi. Collant au fond, pas de chevauchement avec le contenu, pas besoin d'un wrapper.

https://jsfiddle.net/vq1kcedv/

html:

<!DOCTYPE html>
<head>
<title>Footer</title>
</head>
<body>
    <nav>Link1 Link2</nav>
    <article>content</article>
    <footer>Copyright</footer>
</body>
</html>

css:

html, body {
    position: absolute;
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
}

body:after {
    line-height: 100px; /* height of footer */
    white-space: pre;
    content: "\A";
}

footer {  
    position: absolute;
    width: 100%;
    height: 100px; /* height of footer */
    bottom: 0px;
    margin-top: -100px; /* height of footer */
}
1
Frank Zalkow

j'avais déjà fait un jsfiddle auparavant, consultez ceci http://jsfiddle.net/kuyabiye/K5pYe/ try resizin la fenêtre de résultat, si le contenu déborde le défilement sera vu.

1
Berkin Berkcan Çırak

Je sais que c'est un ancien message mais je voulais fournir ma propre solution (avec javascript):

/* css */
footer { width:100%; bottom:0; }

/* javascript */
if ($("body").height() < $(window).height()) {
    document.querySelector('footer').style = 'position:absolute;'
}

Cela devrait fonctionner avec n'importe quel type de pied de page de n'importe quelle taille.

EDIT: solution alternative (pas besoin de css):

/* footer */
if ($("body").height() < $(window).height()) { /* if the page is not long enouth, let's put some more margin to the footer */
    var height = $(document).height() - $("body").height();
    document.querySelector("footer").style.marginTop = height + "px";
}
0
Paul Lemarchand

Découvrez le Fiddle

HTML

<header>

</header>

<section id="content">

</section>

<footer>

</footer>

CSS

body {
  height: 100%;
}
footer {
  width: 100%;
  height: 200px;
}

jQuery

$(function() {

  var footer  = $('footer'),
      footHgt = $('footer').outerHeight(),
      bodyHgt = $('body').height();

  footer
    .css({
      position: 'absolute',
      left: '0',
      top: bodyHgt - footHgt + 'px'
     });

  $(window).resize(function() {

    var footer  = $('footer'),
        footHgt = $('footer').outerHeight(),
        bodyHgt = $('body').height();   

    footer
     .css({
       position: 'absolute',
       left: '0',
       top: bodyHgt - footHgt + 'px'
     }); 

  });

});
0
mdesdev