utilisez les unités CSS vh!

probablement la façon la plus évidente et non-hacky pour aller sur un pied de page collant serait de faire usage de la nouvelle CSS viewport units .

prendre par exemple le balisage simple suivant:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

si l'en-tête est dit 80px haut et le pied de page est 40px haut, alors nous pouvons faire notre pied de page collant avec une seule règle sur la div de contenu:

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

qui signifie: que la hauteur du contenu div soit au moins 100% de la hauteur du viewport moins les hauteurs combinées de l'en-tête et du pied de page.

C'est ça.

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

... et voici comment le même code fonctionne avec beaucoup de contenu dans le div du contenu:

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

NB:

1) la hauteur de l'en-tête et du pied de page doit être connue

2) Les anciennes versions D'IE (IE8 -) et D'Android (4.4 -) ne prennent pas en charge les unités viewport. ( caniuse )

3) Il était une fois webkit avait un problème avec les unités de viewport dans le cadre d'une règle calc. Cela a effectivement été corrigé ( voir ici ) donc il n'y a pas de problème. Cependant, si vous cherchez à éviter d'utiliser calc pour une raison quelconque, vous pouvez obtenir autour de cela en utilisant des marges négatives et un rembourrage avec box-sizing -

Comme suit:

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

sticky footter avec display: flex

Solution inspirée par Philippe Walton sticky footer .

explication

Cette solution est valable uniquement pour :

• Chrome ≥ 21,0
• Firefox ≥ 20,0
• Internet Explorer ≥ 10
• Safari ≥ 6.1

Il est basé sur le flex affichage , en tirant parti de la "151970920 de la propriété", qui permet à un élément de grandir dans hauteur ou largeur (lors de la flow-direction est défini sur column ou row , respectivement), pour s'occuper de l'espace supplémentaire dans le conteneur.

nous allons également tirer parti de la vh unité, où 1vh est défini comme :

1/100ème de la hauteur du viewport

donc une hauteur de 100vh c'est une façon concise de dire à un élément de couvrir toute la hauteur du viewport.

Voici comment vous allez structurer votre page web:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

afin d'avoir le pied de page coller au bas de la page, vous voulez le l'espace entre le corps et le pied de page de croître autant qu'il faut pour faire le pied de page en bas de la page.

donc notre mise en page devient:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

mise en Œuvre

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

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}

<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

vous pouvez jouer avec à le JSFiddle .

Safari bizarreries

soyez conscient que Safari a un mise en œuvre défectueuse de la flex-shrink propriété , qui permet aux articles de rétrécir plus que la hauteur minimale qui serait nécessaire pour afficher le contenu. Pour corriger cette question, vous devrez définir la propriété flex-shrink explicitement à 0 pour le .content et le footer dans l'exemple ci-dessus:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

vous pouvez utiliser position: absolute ci-dessous pour mettre le pied de page au bas de la page, mais ensuite assurez-vous que vos 2 colonnes ont le margin-bottom approprié de sorte qu'ils ne soient jamais occlus par le pied de page.

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

Voici une solution avec jQuery qui fonctionne comme un charme. Il vérifie si la hauteur de la fenêtre est plus grande que la hauteur du corps. Si c'est le cas, cela modifie la marge supérieure du pied de page pour compenser. Testé en Firefox, Chrome, Safari et Opera.

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

si votre pied de page a déjà une marge supérieure (de 50 pixels, par exemple) , vous devrez changer la dernière partie pour:

css( 'margin-top', height_diff + 50 )

définit le CSS pour le #footer à:

position: absolute;
bottom: 0;

vous devrez alors ajouter un padding ou margin au bas de votre #sidebar et #content pour correspondre à la hauteur de #footer ou quand ils se chevauchent, le #footer les couvrira.

aussi, si je me souviens bien, IE6 a un problème avec le bottom: 0 CSS. Vous pourriez avoir à utiliser une solution JS pour IE6 (si vous vous souciez de IE6 qui est).

une solution similaire à @gcedo mais sans la nécessité d'ajouter un contenu intermédiaire afin de pousser le pied de page vers le bas. Nous pouvons simplement ajouter margin-top:auto au pied de page et il sera poussé vers le bas de la page quelle que soit sa hauteur ou la hauteur du contenu ci-dessus.

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

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}

<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

utiliser le positionnement absolu et l'index en z pour créer un div de pied de page collant à n'importe quelle résolution en utilisant les étapes suivantes:

• créer un div de pied de page avec position: absolute; bottom: 0; et la hauteur désirée
• régler le rembourrage du pied de page pour ajouter des espaces entre le fond du contenu et le fond de la fenêtre
• créer un conteneur div qui enveloppe le contenu de la caisse avec position: relative; min-height: 100%;
• ajouter remplissage par le bas du contenu principal div qui est égal à la hauteur plus remplissage du pied de page
• placer le z-index du pied de page plus grand que le conteneur div si le pied de page est coupé

voici un exemple:

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>

essayez de mettre un conteneur div (avec débordement:auto) autour du contenu et de la barre latérale.

si cela ne fonctionne pas, Avez-vous des captures d'écran ou des exemples de liens où le pied de page n'est pas affiché correctement?

une solution consisterait à régler la hauteur minimale des boîtes. Malheureusement, il semble que il n'est pas bien soutenu par IE (surprise).

aucune de ces solutions CSS pures fonctionnent correctement avec le contenu de redimensionnement dynamique (au moins sur firefox et Safari) par exemple, si vous avez un fond fixé sur le div conteneur, la page et puis redimensionner (en ajoutant quelques lignes) table à l'intérieur du div, la table peut sortir du fond de la zone stylée, i.e., vous pouvez avoir la moitié de la table en blanc sur le thème noir et la moitié de la table blanc complet parce que la police-couleur et la couleur de fond est blanc. C'est en gros impossible avec themeroller pages.

Div imbriqué disposition multi-colonne est un hack laid et le 100% min-hauteur corps/conteneur div pour coller pied de page est un hack plus laid.

la seule solution sans script qui fonctionne sur tous les navigateurs que j'ai essayé: une table beaucoup plus simple/plus courte avec thead (pour l'en-tête)/tfoot (pour le pied de page)/tbody (td pour n'importe quel nombre de colonnes) et 100% de hauteur. Mais cela a perçu des désavantages sémantiques et SEO (tfoot doit apparaître devant un organisme. ARIA les rôles peuvent aider décent moteurs de recherche).

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

cela devrait faire l'affaire si vous êtes à la recherche d'un pied de page responsive aligné en bas de la page,qui garde toujours une marge supérieure de 80% de la hauteur du viewport.

pour cette question beaucoup de réponses que j'ai vu sont clunky, difficile à mettre en œuvre et inefficace donc j'ai pensé que je prendrais un coup de feu à elle et de venir avec ma propre solution qui est juste un peu de css et html

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}

<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

cela fonctionne en fixant la hauteur du pied de page et en utilisant ensuite CSS calc pour calculer la hauteur minimale de la page peut être avec le pied de page encore au fond, espérons que cela aide certaines personnes :)

j'ai moi-même lutté avec cela parfois et j'ai toujours trouvé que la solution avec toutes ces div's à l'intérieur de l'autre était une solution salissante. Je me suis juste un peu amusé avec elle, et j'ai personnellement découvert que cela fonctionne et il est certainement l'un des moyens les plus simples:

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

ce que j'aime à ce sujet est qu'aucun HTML supplémentaire ne doit être appliqué. Vous pouvez simplement ajouter ce CSS et ensuite écrire votre HTML comme chaque fois

plusieurs personnes ont mis la réponse à ce simple problème ici, mais j'ai une chose à ajouter, considérant à quel point j'étais frustré jusqu'à ce que je trouve ce que je faisais de mal.

Comme mentionné la façon la plus simple de le faire est comme si..

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

cependant la propriété non mentionnée dans les messages, probablement parce qu'elle est habituellement par défaut, est la position : statique sur l'étiquette de corps. Position par rapport ne fonctionnera pas!

Mon thème wordpress avait supplanté l'affichage de corps par défaut et il m'a embrouillé pendant un long moment désagréable.

un vieux fil je sais, mais si vous êtes à la recherche d'une solution réactive, cet ajout jQuery aidera:

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

guide complet peut être trouvé ici: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer /

j'ai créé une bibliothèque très simple https://github.com/ravinderpayal/FooterJS

il est très simple d'utilisation. Après avoir inclus la bibliothèque, il suffit d'appeler cette ligne de code.

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

peuvent être modifiés dynamiquement en rappelant la fonction ci-dessus avec un paramètre/id différent.

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

Note: - Vous n'avez pas à modifier ou ajouter de CSS. Bibliothèque est dynamique ce qui implique que même si l'écran est redimensionné après la page de chargement il va réinitialiser la position du pied de page. J'ai créé cette bibliothèque, parce que CSS résout le problème pendant un certain temps,mais quand la taille de l'affichage change de manière significative, de bureau en tablette ou vice versa, ils se chevauchent le contenu ou ils ne restent plus collants.

une autre solution est css Media Queries, mais vous devez écrire manuellement différents styles CSS pour différentes tailles d'écrans tandis que cette bibliothèque fait son travail automatiquement et est supporté par tous les navigateurs JavaScript supportant de base.

Modifier Solution CSS:

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

maintenant, si la hauteur de l'affichage est plus que la longueur de votre contenu, nous allons faire pied de page fixe au fond et si non, il apparaîtra automatiquement dans la toute fin de l'affichage que vous avez besoin de faire défiler pour voir cela.

Et, il semble une meilleure solution que JavaScript/bibliothèque.

Je n'avais aucune chance avec les solutions suggérées sur cette page avant, mais finalement, ce petit truc a fonctionné. Je vais l'inclure comme une autre solution possible.

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

pour moi la plus belle façon de l'afficher (le pied de page) est Coller au fond mais ne couvrant pas le contenu tout le temps:

#my_footer {
    position: static
    fixed; bottom: 0
}

jQuery CROSS BROWSER CUSTOM PLUGIN - $.footerBottom ()

ou utilisez jQuery comme je le fais, et réglez votre hauteur de pied de page à auto ou à fix , peu importe ce que vous voulez, cela fonctionnera de toute façon. ce plugin utilise des sélecteurs jQuery donc pour le faire fonctionner, vous devrez inclure la bibliothèque jQuery dans votre fichier.

Voici comment vous exécutez le plugin. Importer jQuery, copier le code de ce plugin jQuery personnalisé et l'importer après l'importation de jQuery! Il est très simple et basique, mais important.

Quand vous le faites, tout ce que vous avez à faire est d'exécuter ce code:

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

il n'est pas nécessaire de le placer dans le document ready event. Il fonctionne bien comme il est. Il recalculera la position de votre pied de page lorsque la page sera chargée et que la fenêtre sera redimensionnée.

Voici le code du plugin qui vous n'avez pas à comprendre. Il suffit de savoir comment pour la mettre en œuvre. Il fait le travail pour vous. Cependant, si vous aimez savoir comment cela fonctionne, il suffit de regarder à travers le code. J'ai laissé des commentaires pour vous.

//import jQuery library before this script

// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5

/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>

les solutions flex ont fonctionné pour moi jusqu'à rendre le pied de page collant, mais malheureusement changer le corps pour utiliser la mise en page flex a fait changer certaines de nos mises en page, et pas pour le meilleur. Ce qui a finalement fonctionné pour moi était:

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

j'ai eu ça de la réponse de ctf0 à https://css-tricks.com/couple-takes-sticky-footer /

depuis que la solution Grid N'a pas encore été présentée, la voici, avec seulement deux déclarations pour élément parent , si nous prenons le height: 100% et margin: 0 pour acquis:

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}

<div class="content">Content</div>
<footer>Footer</footer>

• align-content: space-between

les articles sont également distribué dans le conteneur d'alignement le long l'axe transversal. L'espacement entre chaque paire d'articles adjacents est de même. Le premier élément est de niveau avec le bord de début, et le dernier l'article est affleuré par le bord de l'extrémité principale.