Comment faire pour que le pied de page reste au bas d'une page Web?

291

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.

Bill le lézard
la source
J'ajouterai à @Jimmy: Vous devez également déclarer le positionnement absolu (ou relatif) de l'élément qui contient le pied de page. Dans votre cas, c'est l'élément du corps. Edit: je l'ai testé sur votre page avec firebug et cela semblait très bien fonctionner ...
yoavf
vous devrez peut-être étirer la page html à pleine hauteur comme le dit ce lien: makandracards.com/makandra/…
sina

Réponses:

199

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 */
}
Staale
la source
4
@jlp: Vous devez ajouter la balise de formulaire à la déclaration height: 100%, sinon cela cassera le pied de page collant. Comme ceci: html, corps, forme {hauteur: 100%;}
dazbradbury
J'ai remarqué que l'ajout de rembourrage au pied de page le vis, mais j'ai compris que cela pouvait être résolu en soustrayant le rembourrage supplémentaire du pied de page de la hauteur {footer, push}.
nicooga
1
L'explication détaillée avec la démo est fournie dans ce site: CSS Sticky Footer
mohitp
Hé j'ai suivi tes pas et ça marche plutôt bien pour les grandes pages. Mais sur les petites pages où l'utilisateur n'est pas en mesure de faire défiler le pied de page, c'est un peu trop loin en bas. Cela fait donc défiler une page presque vide. Quelqu'un sait comment résoudre ce problème? Vous pouvez voir ma page de test ici sheltered-escarpment-6887.herokuapp.com
Syk
1
@Syk J'ai trouvé que la réduction de la hauteur minimale aide. 94% est une valeur correcte, mais vous voyez toujours le problème sur mobile :( Je ne suis pas sûr qu'il existe une vraie solution ici.
ACK_stoverflow
84

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.

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

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:

Danield
la source
4
C'est à peu près la meilleure solution que j'ai vue ici, qui a fonctionné même dans mon cas étrange avec du contenu du contenu débordant dans le pied de page pour qui-sait-quelle-raison. Et je suppose qu'avec sth comme Sass et les variables, cela pourrait être toujours plus flexible.
themarketka
1
En effet, celui-ci fonctionne comme un charme. Facile à utiliser également pour les navigateurs non compatibles.
Aramir
3
Comment jouer avec des mesures absolues n'est-il pas encore hacky? Au mieux c'est peut-être moins hacky
Jonathan
Mais et si la hauteur du pied de page et de l'en-tête est mesurée en pourcentage et non en px? Vous aimez 15% de la hauteur de la page?
Fernanda Brum Lousada
3
Les unités de fenêtre ne fonctionnent pas toujours comme prévu sur les navigateurs mobiles qui masquent ou affichent la barre d'adresse en fonction de la position du défilement
Evgeny
57

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; }
gcedo
la source
13
Je pense que c'est la bonne réponse, car c'est en fait la seule approche qui fonctionne même lorsque la hauteur du pied de page n'est pas connue.
fstanis
Cela gâche la grille avec Neat 2
Halfacht
Mais pourquoi pas la solution de Philip Walton elle-même, pourquoi un élément "spacer" supplémentaire?
YakovL
@YakovL Dans l' .Site-contentélément de solution de Walton joue le même rôle que spacer. C'est juste appelé différemment.
Gherman
@Gherman bien, .Site-contenta un analogue .contentdans ce balisage .. mais peu importe, j'ai demandé le cas gcedo a une idée précise à ce sujet, pas besoin de deviner
YakovL
30

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; 
}
Jimmy
la source
J'ai essayé cela avec ma configuration similaire (deux colonnes + pied de page) et cela ne fonctionne pas.
isomorphismes
14
Il chevauche le contenu si le contenu grandit.
Satya Prakash
1
c'est pourquoi le contenu a le bord inférieur. vous devez le régler à n'importe quelle hauteur fixe que vous faites le pied de page.
Jimmy
Pour ce que ça vaut, si quelque chose est une valeur nulle, peu importe l'unité de mesure dans laquelle il se trouve, rien n'est rien, donc tous les 0pxs dans toutes les feuilles de style que j'ai vues devraient être justes 0.
Jonathan
que faire si la hauteur de la page est supérieure à la hauteur de l'affichage ou la longueur du contenu du pied de page est dynamique? Voir ma réponse pour la solution de ce problème.
Ravinder Payal du
15

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 )
Sophivorus
la source
Une alternative consiste à ajouter un div "pousseur" juste avant le pied de page. Réglez ensuite la hauteur du diviseur poussoir. Cela évite d'avoir à faire face à la marge existante
Sarsaparilla
Voir ma réponse pour une solution no-js.
ferit le
11

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).

Raleigh Buckner
la source
10
lorsque la fenêtre est trop petite, le pied de page apparaît devant le contenu avec ce css.
Seichi
1
Voir ma réponse @Seichi
ferit
6

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>

Temani Afif
la source
1
Une autre approche serait de donner .content flex: 1 0 auto;pour le rendre évolutif et non shinkable, mais margin-top: auto;c'est une bonne astuce qui implique un style de pied de page, pas "non lié" .contentqui est agréable. En fait, je me demande pourquoi le flex est nécessaire dans cette approche ..
YakovL
@YakovL oui l'idée principale ici est l'astuce margin-top;) Je sais que je peux faire le contenu comme ça mais ce sera presque la même chose qu'une réponse précédente où l'idée est de pousser le pied de page par le contenu ... et ici, je voulais éviter cela et pousser le pied de page uniquement avec marge;)
Temani Afif
@YakovL flex est nécessaire pour la marge: auto :) nous ne pouvons pas l'utiliser sans elle ... car margin: auto se comporte légèrement différemment avec l'élément flex puis bloque les éléments. Si vous le supprimez, display:flexcela ne fonctionnera pas, vous aurez un flux d'élément de bloc normal
Temani Afif
Ouais, je peux voir que ça ne marchera pas sans ça, mais je ne comprends pas pourquoi (ce qui est "légèrement différent")
YakovL
1
@YakovL c'est simple, en utilisant l'élément de bloc normal, le flux est toujours une direction de ligne, donc seule la marge droite / gauche utilisée avec auto fonctionnera (comme le célèbre margin:0 autoélément de bloc central) MAIS nous n'avons pas de direction de colonne donc il n'y a pas de marge auto avec haut / bas. Flexbox a à la fois la direction ligne / colonne;). C'est la légère différence, mais la marge est également utilisée dans flexbox pour aligner l'élément, donc même dans une direction de ligne, vous pouvez utiliser la marge automatique haut / bas pour aligner verticalement. Vous pouvez en lire plus ici: w3.org/TR/css- flexbox-1 / # auto-
margins
5

entrez la description de l'image ici

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/

ferit
la source
2

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

Daniel Alsaker
la source
Cela m'a fonctionné, mais j'ai ajouté de la largeur: 100% au pied de page.
Victor.Uduak
2

É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>

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.

VXp
la source
1

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.

Ajith
la source
1

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>

Paul Sweatte
la source
1

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 :)

jjr2000
la source
0

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).

obecalp
la source
0

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.

Kyle Zimmer
la source
0

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/

user1235285
la source
0

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.

Ravinder Payal
la source
0

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;
}
Cheval qui rit
la source
0

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;
}
Reggie Pinkham
la source
0

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
}
Juan Isaza
la source
1
Cette syntaxe est-elle correcte? La position est-elle censée être statique ou fixe?
stealththeninja
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>

DevWL
la source
Vanilla java-script est moins long que le plugin.
Ravinder Payal
0

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/

Roger
la source
0

div.fixed {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 100%;
   border: 3px solid #73AD21;
}
<body style="height:1500px">

   <h2>position: fixed;</h2>

   <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

   <div class="fixed">
      This div element has position: fixed;
   </div>

</body>

antelove
la source
0

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é.

kiko carisse
la source
-1

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?

John Sheehan
la source