web-dev-qa-db-fra.com

CSS pour que le pied de page HTML reste au bas de la page avec une hauteur minimale, mais ne chevauche pas la page

J'avais la page suivante (lien mort: http://www.workingstorage.com/Sample.htm) qui a un pied de page que je ne peux pas faire asseoir au bas de la page.

Je veux le pied de page

  • coller au bas de la fenêtre lorsque la page est courte et que l'écran n'est pas rempli, et
  • restez à la fin du document et descendez normalement quand il y a plus qu'un contenu d'écran (au lieu de chevaucher le contenu).

Le CSS est hérité et m'embrouille; Je n'arrive pas à le modifier correctement pour donner une hauteur minimale au contenu ou pour faire passer le pied de page au fond.

cssfooter
272
Caveatrob

Une méthode simple consiste à créer le corps 100% de votre page, avec aussi un min-height de 100%. Cela fonctionne très bien si la hauteur de votre pied de page ne change pas.

Donnez au pied de page une marge supérieure négative:

#footer {
    clear: both;
    position: relative;
    height: 40px;
    margin-top: -40px;
}
305
Jon Winstanley

J'ai développé une méthode assez facile pour coller le pied de page en bas, mais comme méthodes les plus courantes, vous devrez la modifier pour l'adapter à la hauteur de votre pied de page .  

VOIR LA DÉMO

La méthode ci-dessous utilise une "astuce" en plaçant un pseudo-élément ::after sur la variable body et en lui attribuant la hauteur exacte du pied de page, de sorte qu'il occupe exactement le le pied de page est absolute placé dessus, il semblerait que le pied de page occupe réellement de la place et élimine les effets négatifs de son positionnement absolu (par exemple, en passant en revue le contenu du corps)

HTML (balisage commun de base)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Les méthodes ci-dessous permettent des hauteurs de pied de page dynamiques:

Utiliser la flexbox

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

Utiliser Table-layout

html,body { height: 100%;  margin: 0; }

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>

50
vsync

Une approche très simple qui fonctionne très bien avec plusieurs navigateurs est la suivante:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
36
Tamás Pap

À partir de IE7, vous pouvez simplement utiliser

#footer {
    position:fixed;
    bottom:0;
}

Voir caniuse pour obtenir de l'aide. 

29
Liam

J'ai utilisé cela pour coller mon pied de page au bas et cela a fonctionné pour moi:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

C'est la seule modification que vous devez faire dans le code HTML, ajoutez div à la classe "allButFooter". Je l'ai fait avec toutes les pages, celles qui étaient si courtes, je savais que le pied de page ne collerait pas au bas de la page, ainsi que des pages suffisamment longues pour que je sache déjà que je devais faire défiler. C'est ce que j'ai fait pour que je puisse voir que cela fonctionne correctement dans le cas où le contenu d'une page est dynamique. 

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

La classe "allButFooter" a une valeur min-height qui dépend de la hauteur de la fenêtre (100vh signifie 100% de la hauteur de la fenêtre) et de la hauteur du pied de page, que je connaissais déjà était 40px.

C'est tout ce que j'ai fait et cela a parfaitement fonctionné pour moi. Je n'ai pas essayé dans tous les navigateurs, juste Firefox, Chrome et Edge, et les résultats ont été tels que je les voulais. Le pied de page colle au bas de la page et vous n'avez pas à vous soucier de l'index z, de la position ou de toute autre propriété. La position de chaque élément dans mon document était la position par défaut, je ne l'ai pas changé en absolu ou fixe ou quoi que ce soit.

Travailler avec un design réactif

Voici quelque chose que je voudrais effacer. Cette solution, avec le même pied de page 40px haut, ne fonctionnait pas comme prévu lorsque je travaillais dans une conception réactive utilisant Twitter-Bootstrap. Je devais modifier la valeur que je soustrais dans la fonction:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

Ceci est probablement dû au fait que Twitter-Bootstrap a ses propres marges et marges, c’est pourquoi j’ai dû ajuster cette valeur.

J'espère que cela vous sera utile! Au moins, c'est une solution simple à essayer, et cela n'implique pas de gros changements dans l'ensemble du document.

15
N. Larrieux

Une solution simple que j'utilise, fonctionne à partir de IE8 +

Donnez min-height: 100% sur le code HTML, de sorte que si le contenu est inférieur à la page, la page prend la hauteur totale du port de visualisation et le pied de page reste en bas de page. Lorsque le contenu augmente, le pied de page décale avec le contenu et continue de coller au fond.

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
15
Sanjeev

Pourtant, une autre solution très simple est celle-ci:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

L'astuce consiste à utiliser un display:table pour tout le document et display:table-row avec height:0 pour le pied de page.

Étant donné que le pied de page est le seul corps du corps à afficher comme table-row, il est affiché au bas de la page.

8
Jose Rui Santos

Il faut se méfier des appareils mobiles, car ils implémentent l'idée de la fenêtre d'affichage de manière «inhabituelle»:

http://developer.Apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/Usingthe Viewport.html#//Apple_ref/doc/uid/TP40006509-SW25

En tant que tel, utiliser position: fixed; (comme je l'ai déjà recommandé dans d'autres endroits) n'est généralement pas la solution. Bien sûr, cela dépend du comportement exact que vous recherchez.

Ce que j'ai utilisé et qui a bien fonctionné sur les ordinateurs de bureau et mobiles, est:

<body>
    <div id="footer"></div>
</body>

avec

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}
7
Ben Jackson

Faire ceci

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

Vous pouvez également lire à propos de flex, il est supporté par tous les navigateurs modernes

Update: J'ai lu à propos de flex et essayé. Cela a fonctionné pour moi. J'espère que cela fait la même chose pour vous. Voici comment j’ai implémenté. Ici principal n’est pas l’ID c’est le div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

Ici, vous pouvez en savoir plus sur flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

N'oubliez pas qu'il n'est pas pris en charge par les anciennes versions d'IE.

5
Aarth Tandel

Ma méthode jQuery, celle-ci met le pied de page en bas de la page si le contenu de la page est inférieur à la hauteur de la fenêtre, ou place simplement le pied de page après le contenu sinon:

En outre, conserver le code dans son propre boîtier avant tout autre code réduira le temps nécessaire pour repositionner le pied de page.

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
4
Sam Jones

J'ai moi-même examiné ce problème. J'ai vu pas mal de solutions et chacune d'entre elles présentait des problèmes, impliquant souvent des chiffres magiques.

Donc, en utilisant les meilleures pratiques de différentes sources, j'ai proposé cette solution:

http://jsfiddle.net/vfSM3/248/

Ce que je voulais réaliser précisément ici était de faire défiler le contenu principal entre le pied de page et l'en-tête dans la zone verte.

voici un simple css:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}
3
husayt

Ceci est connu comme un pied de page collant. Un recherche google car il donne beaucoup de résultats. Un CSS Sticky Footer est celui que j'ai utilisé avec succès. Mais il y a plus.

css:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .Push {
    height: 4em;
}

html:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="Push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Source pour ce code

2
Paolo Bergantino

voici mes deux cents. Comparativement à d'autres solutions, il n'est pas nécessaire d'ajouter des conteneurs supplémentaires. Cette solution est donc un peu plus élégante. Sous l'exemple de code, je vais expliquer pourquoi cela fonctionne.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

La première chose que nous faisons est donc de fabriquer le plus gros conteneur (html) à 100%. La page html est aussi grande que la page elle-même. Ensuite, nous définissons la hauteur du corps, elle peut être supérieure à 100% de la balise html, mais elle devrait au moins être aussi grande; nous utilisons donc 100% de hauteur minimum. 

Nous faisons aussi le corps relatif. Relatif signifie que vous pouvez déplacer l'élément de bloc d'une position relative à sa position d'origine. Nous n'utilisons pas cela ici cependant. Parce que le parent a une deuxième utilisation. Tout élément absolu est soit absolu pour la racine (html), soit pour le premier parent/grand-parent relatif. C'est ce que nous voulons, nous voulons que le pied de page soit absolu, relatif au corps, à savoir le bas. 

La dernière étape consiste à définir le pied de page en absolu et en bas: 0, ce qui le déplace vers le bas du premier parent/grand-parent qui est relatif (corps du cours).

Nous avons maintenant un problème à résoudre: lorsque nous remplissons la page complète, le contenu passe sous le pied de page. Pourquoi? Eh bien, parce que le pied de page n'est plus dans le "flux html", car il est absolu. Alors, comment pouvons-nous résoudre ce problème? Nous allons ajouter un rembourrage au bas du corps. Cela garantit que le corps est réellement plus grand que son contenu. 

J'espère avoir été très clair pour vous les gars. 

2
David

Voici comment j'ai résolu le même problème

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to Push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

2
Nemus

Je viens de répondre à une question similaire ici: 

Positionner le pied de page en bas de page avec en-tête fixe

Je suis un débutant dans le développement Web et je sais que l'on a déjà répondu à cette question, mais c'est la façon la plus simple que j'ai trouvée pour le résoudre. Je voulais quelque chose de flexible car le pied de page de mon application Web avait une hauteur dynamique. J'ai fini par utiliser FlexBox et un spacer.

  1. Commencez par définir la hauteur de votre html et de votre corps
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

J'assume un comportement column pour notre application, dans le cas où vous devez ajouter un en-tête, un héros ou tout contenu aligné verticalement. 

  1. Créer la classe d'espacement
.spacer {
    flex: 1; 
}
  1. Donc, plus tard, votre HTML pourrait être quelque chose comme 
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Vous pouvez y jouer ici https://codepen.io/anon/pen/xmGZQL

1
Camo

Tu peux le faire

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}
1
waploaj

Il suffit de définir le code HTML, le corps et les autres lignes, à l’exception du pied de page, sur 100% . 

<body>
<header></header>
<content></content>
<footer></footer>

le css devient 

html, body, header, content{
height:100%;
}
1
Olatunde G.

Dynamic one liner utilisant jQuery

Toutes les méthodes CSS que j'ai rencontrées sont trop rigides. De plus, définir le pied de page sur fixed n'est pas une option si cela ne fait pas partie de la conception. 

Testé sur:

  • Chrome: 60
  • FF: 54
  • IE: 11

En supposant cette mise en page:

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

Utilisez la fonction jQuery suivante:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

Ce que cela fait est de définir le min-height pour #content sur la hauteur window - la hauteur du pied de page quoi que cela puisse être à ce moment-là.

Depuis que nous avons utilisé min-height, si #content height dépasse la window height, la fonction se dégrade gracieusement et n'a aucun effet, car elle n'est pas nécessaire.

Voyez-le en action:

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

Même extrait sur JsFiddle

Prime:

Nous pouvons aller plus loin et adapter cette fonction au redimensionnement dynamique de la visionneuse de la manière suivante:

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>

0
I haz kode

Il suffit de personnaliser la section de pied de page

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}

 <div class="footer">
   Footer is always bootom
 </div>
0
rashedcs
footer {
  margin-top:calc(5% + 60px);
}

Cela fonctionne bien

0
Karthikaeyan

Une solution de flexion très simple qui ne suppose pas de hauteur fixe ni de changement de position des éléments.

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

Support du navigateur

Tous les principaux navigateurs, sauf IE11 et inférieur.

Veillez à utiliser Autoprefixer pour les préfixes appropriés.

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/////////////////////////////////////////////

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}
<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

0
m.spyratos