Comment faire en sorte que le pied de page reste en bas d’une page Web ?

StackOverflow https://stackoverflow.com/questions/42294

Question

J'ai une disposition simple à 2 colonnes avec un pied de page qui efface à la fois les div droit et gauche dans mon balisage.Mon problème est que je n'arrive 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.

Mise à jour:

Cela ne fonctionne pas correctement dans Firefox.Je vois une bande de couleur d'arrière-plan sous le pied de page lorsqu'il n'y a pas suffisamment de contenu sur la page pour pousser le pied de page jusqu'en bas de la fenêtre du navigateur.Malheureusement, c'est l'état par défaut de la page.

Était-ce utile?

La solution

Pour obtenir un pied de page collant :

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

  2. Droite avant la fermeture </div> de la wrapper placer le<div class="push"></div>.

  3. Droite après la fermeture </div> de la wrapper placer 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 */
}

Autres conseils

Utilisez les unités CSS vh !

La manière la plus évidente et la plus simple de gérer un pied de page collant serait probablement d'utiliser le nouveau unités de fenêtre 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, disons, 80 px de haut et que le pied de page mesure 40 px de haut, alors nous pouvons créer notre pied de page collant. avec une seule règle sur le contenu div :

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

Ce qui signifie:que la hauteur du contenu div soit au moins 100 % de la hauteur de la fenêtre d'affichage 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 content :

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

Attention :

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 de fenêtre.(puis-je utiliser)

3) Il était une fois un problème avec les unités de fenêtre dans une règle de calcul.Ceci a en effet été corrigé (vois ici) donc il n'y a pas de problème.Cependant, si vous souhaitez éviter d'utiliser calc pour une raison quelconque, vous pouvez contourner ce problème en utilisant des marges négatives et un remplissage 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 de Le pied de page collant de Philip Walton.

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 afficher, en tirant parti de flex-grow propriété, qui permet à un élément de grandir Dans les deux cas hauteur ou largeur (quand le flow-direction est défini sur soit column ou row respectivement), pour occuper l’espace supplémentaire dans le conteneur.

Nous allons également tirer parti du vh unité, où 1vh est défini comme:

1/100ème de la hauteur de la fenêtre

Donc une hauteur de 100vh c'est une manière concise de dire à un élément de s'étendre sur toute la hauteur de la fenêtre.

Voici comment structurer votre page Web :

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

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

Afin que le pied de page colle au bas de la page, vous souhaitez que l'espace entre le corps et le pied de page augmente autant qu'il le faut pour pousser le pied de page au bas de la page.

Notre disposition devient donc :

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

Les bizarreries du safari

Sachez que Safari a un une mise en œuvre défectueuse du flex-shrink propriété, ce qui permet aux éléments de rétrécir au-delà de la hauteur minimale requise pour afficher le contenu.Pour résoudre ce problème, vous devrez définir le flex-shrink propriété explicitement à 0 au .content et le footer dans l'exemple ci-dessus :

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

Vous pourriez utiliser position: absolute suivant pour mettre le pied de page en bas de la page, mais assurez-vous ensuite que vos 2 colonnes ont le bon margin-bottom afin qu'ils ne soient jamais obstrués par le pied de page.

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

Voici une solution avec jQuery qui fonctionne à merveille.Il vérifie si la hauteur de la fenêtre est supérieure à la hauteur de la carrosserie.Si tel est le cas, la marge supérieure du pied de page est modifiée pour compenser.Testé sur 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 possède 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 alors ajouter un padding ou margin au fond de votre #sidebar et #content pour correspondre à la hauteur de #footer ou lorsqu'ils se chevauchent, le #footer les couvrira.

De plus, si je me souviens bien, IE6 a un problème avec le bottom: 0 CSS.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 pour pousser le pied de page vers le bas.On peut 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 au 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>

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

  • Créez un pied de page div 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éer un conteneur div qui enveloppe le contenu du corps avec position: relative; min-height: 100%;
  • Ajouter un remplissage inférieur au contenu principal div qui est égal à la hauteur plus le rembourrage du pied de page
  • Met le z-index du pied de page supérieur au conteneur div si le pied de page est tronqué

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 placer un conteneur div (avec overflow: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 ?

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

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 défini un arrière-plan sur le div du conteneur, la page, puis redimensionnez (en ajoutant quelques lignes) la table à l'intérieur du div, le 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 entièrement en blanc, car la couleur de la police et la couleur d'arrière-plan sont blanches.C'est fondamentalement irréparable avec les pages Themeroller.

La disposition multi-colonnes div imbriquée est un hack laid et le div corps/conteneur à 100 % de hauteur minimale 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 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 présente des inconvénients sémantiques et SEO (le pied doit apparaître avant le corps).Les rôles ARIA peuvent cependant aider les moteurs de recherche décents).

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 d'affichage.

Pour cette question, la plupart des réponses que j'ai vues sont maladroites, difficiles à mettre en œuvre et inefficaces, j'ai donc pensé essayer et proposer 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, j'espère que cela aidera certaines personnes :)

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

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

Comme mentionné, la manière la plus simple de procéder est la suivante.

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 généralement par défaut, est la position:statique sur l'étiquette du corps.La position relative ne fonctionnera pas !

Mon thème WordPress avait remplacé l'affichage du corps par défaut et cela m'a dérouté pendant un temps odieusement long.

Un vieux fil de discussion que je connais, mais si vous recherchez une solution réactive, cet ajout de 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 un paramètre/identifiant différent. 

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

Remarque : - Vous n'avez pas besoin de modifier ou d'ajouter du CSS.La bibliothèque est dynamique, ce qui implique que même si l'écran est redimensionné après le chargement de la page, la position du pied de page sera réinitialisée.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, d'un ordinateur de bureau à une tablette ou vice versa, soit ils chevauchent le contenu, soit 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'écran pendant que cette bibliothèque fait son travail automatiquement et est prise en charge par tous les navigateurs de base prenant en charge JavaScript.

ModifierSolution 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;
    }
}

Désormais, si la hauteur d'affichage est supérieure à la longueur de votre contenu, nous fixerons le pied de page en bas et sinon, il apparaîtra automatiquement à la toute fin de l'affichage car vous devrez faire défiler pour le voir.

Et cela semble être une meilleure solution que celle de JavaScript/bibliothèque.

Je n'avais pas eu de chance avec les solutions suggérées sur cette page auparavant, mais finalement, cette petite astuce 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érable 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 façon la plus agréable de l'afficher (le pied de page) est de coller en bas mais de ne pas couvrir tout le temps le contenu :

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

PLUGIN PERSONNALISÉ DU NAVIGATEUR CROSS jQuery - $.footerBottom()

Ou utilisez jQuery comme je le fais et réglez la hauteur de votre pied de page sur auto ou pour fix, quoi que vous vouliez, 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 exécuter 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 document ready.Il fonctionnera bien tel quel.Il recalculera la position de votre pied de page lorsque la page sera chargée et lorsque la fenêtre sera redimensionnée.

Voici le code du plugin que vous n'êtes pas obligé de comprendre.Sachez simplement comment le mettre en œuvre.Il fait le travail pour vous.Cependant, si vous souhaitez savoir comment cela fonctionne, parcourez 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 modifié 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)");

});

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

Depuis le Grille La solution n'a pas encore été présentée, la voici, avec seulement deux déclarations pour le élément parent, si l'on prend 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>

Les éléments 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 est en train de rougir avec le bord de démarrage principal, et le dernier élément est à la chasse avec le bord de l'extrémité principale.

      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>

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top