J'ai une disposition simple à 2 colonnes avec un pied de page qui efface les div droit et gauche dans mon balisage. Mon problème est que je ne parviens pas à faire en sorte que le pied de page reste en bas de la page dans tous les navigateurs. Cela fonctionne si le contenu pousse le pied de page vers le bas, mais ce n'est pas toujours le cas.

Pour obtenir un pied de page collant:

1. Ayez un <div>avec class="wrapper"pour votre contenu.

2. Juste avant la fermeture </div>du wrapperlieu le <div class="push"></div>.

3. Juste après la fermeture </div>du wrapperlieu le <div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Utilisez les unités CSS vh!

La façon la plus évidente et la plus simple de contourner un pied de page collant serait probablement d'utiliser les nouvelles unités de fenêtre d'affichage CSS .

Prenons 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 fait 80 pixels de haut et le pied de page 40 pixels de haut, alors nous pouvons créer notre pied de page collant avec une seule règle sur la div du contenu:

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

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

C'est tout.

* {
    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 la div de 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 d'affichage. ( caniuse )

3) Il était une fois webkit avait un problème avec les unités de fenêtre dans une règle de calcul. Cela a en effet été corrigé ( voir ici ) donc il n'y a pas de problème là-bas. Cependant, si vous cherchez à éviter d'utiliser calc pour une raison quelconque, vous pouvez contourner cela en utilisant des marges négatives et un rembourrage avec le dimensionnement de la boîte -

Ainsi:

* {
    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>

Pied de page collant avec display: flex

Solution inspirée du pied de page collant de Philip Walton .

Explication

Cette solution n'est valable que pour :

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

Il est basé sur l' flexaffichage , tirant parti de la flex-growpropriété, qui permet à un élément de croître en hauteur ou en largeur (lorsque le flow-directionest défini sur l'un columnou l' autre row), pour occuper l'espace supplémentaire dans le conteneur.

Nous allons également tirer parti de l' vhunité, qui 1vhest définie comme :

1 / 100e de la hauteur de la fenêtre

Par conséquent, une hauteur de 100vhc'est une façon concise de dire à un élément de s'étendre sur toute la hauteur de la fenêtre d'affichage.

Voici comment structurer votre page Web:

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

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

Pour que le pied de page reste en bas de la page, vous voulez que l'espace entre le corps et le pied de page augmente autant qu'il le faut pour pousser le pied de page en bas de la page.

Par conséquent, notre mise en page devient:

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

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

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

la mise en oeuvre

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 lui au JSFiddle .

Safari bizarreries

Sachez que Safari a une implémentation imparfaite de la flex-shrinkpropriété , qui permet aux éléments de rétrécir plus que la hauteur minimale qui serait requise pour afficher le contenu. Pour résoudre ce problème, vous devrez définir flex-shrinkexplicitement la propriété 0 sur le .contentet le footerdans l'exemple ci-dessus:

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

Vous pouvez utiliser la commande position: absolutesuivante pour placer le pied de page au bas de la page, mais assurez-vous ensuite que vos 2 colonnes sont appropriées margin-bottomafin qu'elles ne soient jamais obstruées 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 supérieure à la hauteur du corps. Si c'est le cas, cela modifie la marge en haut du pied de page pour compenser. Testé dans 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 modifier la dernière partie pour:

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

Définissez le CSS pour le #footer:

position: absolute;
bottom: 0;

Vous devrez ensuite ajouter un paddingou marginau bas de votre #sidebaret #contentpour correspondre à la hauteur #footerou lorsqu'ils se chevauchent, le #footerles couvrira.

De plus, si je me souviens bien, IE6 a un problème avec le bottom: 0CSS. Vous devrez peut-être utiliser une solution JS pour IE6 (si vous vous souciez d'IE6).

Une solution similaire à @gcedo mais sans avoir besoin d'ajouter un contenu intermédiaire afin de pousser le pied de page vers le bas. Nous pouvons simplement ajouter margin-top:autoau 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>

index.html:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

Source: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

J'ai moi-même eu du mal avec cela parfois et j'ai toujours trouvé que la solution avec tous ces div les uns dans les autres était une solution compliquée. Je me suis juste un peu amusé, et j'ai personnellement découvert que cela fonctionne et que c'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, c'est qu'aucun HTML supplémentaire ne doit être appliqué. Vous pouvez simplement ajouter ce CSS, puis écrire votre code HTML comme chaque fois

Étant donné que la solution Grid n'a pas encore été présentée, la voici, avec seulement deux déclarations pour l' élément parent , si nous prenons le height: 100%et margin: 0pour 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 répartis uniformément dans le conteneur d'alignement le long de l'axe transversal. L'espacement entre chaque paire d'éléments adjacents est le même. Le premier élément affleure le bord de début principal et le dernier élément affleure le bord de fin principal.

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 recherchez un pied de page réactif aligné en bas de la page, qui conserve toujours une marge supérieure de 80% de la hauteur de la fenêtre.

Utilisez le positionnement absolu et l'index z pour créer un div de bas de page collant à n'importe quelle résolution en procédant comme suit:

• Créer un div de pied de page avec position: absolute; bottom: 0;et la hauteur souhaitée
• Définissez le remplissage du pied de page pour ajouter un espace entre le bas du contenu et le bas de la fenêtre
• Créez un conteneur divqui enveloppe le contenu du corps avecposition: relative; min-height: 100%;
• Ajoutez un rembourrage inférieur au contenu principal divégal à la hauteur plus le rembourrage du pied de page
• Définissez le z-indexpied de page plus grand que le conteneur divsi 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>

Pour cette question, la plupart des réponses que j'ai vues sont maladroites, difficiles à mettre en œuvre et inefficaces, alors j'ai pensé que j'allais tenter ma chance et trouver ma propre solution qui n'est qu'un tout petit peu de CSS et de 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 définissant la hauteur du pied de page, puis en utilisant css calc pour déterminer la hauteur minimale de la page avec le pied de page toujours en bas, espérons que cela aide certaines personnes :)

Une solution serait de définir la hauteur minimale des boîtes. Malheureusement, il semble que ce ne soit pas bien pris en charge par IE (surprise).

Aucune de ces solutions css pures ne fonctionne correctement avec le redimensionnement dynamique du contenu (au moins sur Firefox et Safari), par exemple, si vous avez un arrière-plan défini sur la div du conteneur, la page, puis redimensionnez (en ajoutant quelques lignes) la table à l'intérieur de la div, la le tableau peut dépasser du bas de la zone stylisée, c'est-à-dire que vous pouvez avoir la moitié du tableau en blanc sur le thème noir et la moitié du tableau blanc complet car la couleur de police et la couleur d'arrière-plan sont blanches. Il est fondamentalement impossible de le réparer avec les pages du rouleau.

La disposition multi-colonnes div imbriquée est un hack moche et la div 100% hauteur / corps / conteneur pour coller le pied de page est un hack plus laid.

La seule solution sans script qui fonctionne sur tous les navigateurs que j'ai essayés: un tableau beaucoup plus simple / plus court avec thead (pour en-tête) / tfoot (pour pied de page) / tbody (td pour n'importe quel nombre de colonnes) et 100% de hauteur. Mais cela a perçu des inconvénients sémantiques et SEO (tfoot doit apparaître avant tbody. Les rôles ARIA peuvent cependant aider les moteurs de recherche décents).

Plusieurs personnes ont mis la réponse à ce problème simple ici, mais j'ai une chose à ajouter, étant donné ma frustration jusqu'à ce que je comprenne ce que je faisais mal.

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

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 articles, probablement parce qu'elle est généralement par défaut, est la position: statique sur la balise body. La position relative ne fonctionnera pas!

Mon thème wordpress avait outrepassé l'affichage du corps par défaut et cela m'a dérouté pendant une longue période odieuse.

Un vieux fil que je connais, mais si vous cherchez une solution réactive, cet ajout jQuery vous 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});
}

Le 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

Son utilisation est très simple. Après avoir inclus la bibliothèque, appelez simplement cette ligne de code.

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

Les pieds de page peuvent être modifiés dynamiquement en rappelant la fonction ci-dessus avec différents paramètres / id.

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

Remarque: - Vous ne devez pas modifier ou ajouter de CSS. La bibliothèque est dynamique, ce qui implique que même si l'écran est redimensionné après le chargement de la page, il réinitialisera la position du pied de page. J'ai créé cette bibliothèque, car CSS résout le problème pendant un certain temps, mais lorsque la taille de l'affichage change de manière significative, du bureau à la tablette ou vice versa, ils chevauchent le contenu ou 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 pendant que cette bibliothèque fait son travail automatiquement et est prise en charge par tous les navigateurs de base prenant en charge JavaScript.

Modifier la 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 d'affichage est supérieure à la longueur de votre contenu, nous allons fixer le pied de page au bas et sinon, il apparaîtra automatiquement en toute fin d'affichage, car vous devez faire défiler pour voir cela.

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

Je n'ai pas eu de chance avec les solutions suggérées sur cette page auparavant 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;
}

Solution Flexbox

La disposition flexible est préférée pour les hauteurs naturelles d'en-tête et de pied de page. Cette solution flexible est testée dans les navigateurs modernes et fonctionne réellement :) dans IE11.

Voir JS Fiddle .

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>  

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

Pour moi, la meilleure façon de l'afficher (le pied de page) est de coller au fond mais de ne pas couvrir 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 définissez la hauteur de votre pied de page sur autoou surfix , comme vous le souhaitez, 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. Importez jQuery, copiez le code de ce plugin jQuery personnalisé et importez-le après avoir importé jQuery! C'est très simple et basique, mais important.

Lorsque vous le faites, il vous suffit 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 l'événement prêt pour le document. Il fonctionnera bien tel quel. Il recalculera la position de votre pied de page lorsque la page est chargée et lorsque la fenêtre est redimensionnée.

Voici le code du plugin que vous n'avez pas à comprendre. Sachez simplement comment l'implémenter. Il fait le travail pour vous. Cependant, si vous voulez savoir comment cela fonctionne, regardez simplement le code. Je vous ai laissé des commentaires.

//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 flexibles ont fonctionné pour moi jusqu'à rendre le pied de page collant, mais malheureusement, changer le corps pour utiliser la mise en page flexible a fait changer certaines de nos mises en page, et pas pour le mieux. Ce qui a finalement fonctionné pour moi, c'est:

    jQuery(document).ready(function() {

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

});

Je l'ai obtenu de la réponse de ctf0 à https://css-tricks.com/couple-takes-sticky-footer/

Si vous ne le souhaitez pas en utilisant la position fixe et en vous suivant avec agacement sur mobile, cela semble fonctionner pour moi jusqu'à présent.

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

#site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 2px;
    background: #32383e;
}

Il suffit de définir le code html à min-height: 100%;et position: relative;, puis position: absolute; bottom: 0; left: 0;sur le pied de page. Je me suis ensuite assuré que le pied de page était le dernier élément du corps.

Faites-moi savoir si cela ne fonctionne pas pour quelqu'un d'autre, et pourquoi. Je sais que ces hacks de style fastidieux peuvent se comporter étrangement dans diverses circonstances auxquelles je n'avais pas pensé.

Essayez de placer 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 ne s'affiche pas correctement?