recherche

Maison  >  Questions et réponses  >  le corps du texte

Le pied de page se trouve en bas de la page ou en bas du contenu (selon la valeur la plus basse)

J'ai la structure suivante : 

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

J'utilise javascript pour charger dynamiquement le contenu dans

中的内容。因此，

. Par conséquent, la hauteur du bloc

peut changer.

Je souhaite que le bloc


soit en bas de page lorsqu'il y a beaucoup de contenu, ou en bas de la fenêtre du navigateur lorsqu'il n'y a que quelques lignes de contenu.

Actuellement, je peux choisir l'un ou l'autre... mais pas les deux.

Est-ce que quelqu'un sait comment je peux faire cela - demandez


de coller au bas de la page/du contenu ou au bas de l'écran, selon la valeur la plus basse.
🎜🎜🎜
P粉716228245P粉716228245398 Il y a quelques jours498

répondre à tous(2)je répondrai

  • P粉344355715

    P粉3443557152024-01-22 14:23:30

    Sticky Footer de Ryan Fait est une solution simple que j'ai utilisée à plusieurs reprises dans le passé.

    HTML de base :

    <div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

    CSS :

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

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

    Traduisez ceci en quelque chose de similaire à ce que vous avez déjà obtenu, à peu près comme ceci :

    HTML :

    <body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

    CSS :

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

    N'oubliez pas de mettre à jour les nombres négatifs sur les marges d'emballage pour qu'ils correspondent à la hauteur du pied de page et de pousser div. Bonne chance!

    répondre
    0
  • P粉970736384

    P粉9707363842024-01-22 10:09:20

    Le Sticky Footer de Ryan Fait est très bon, mais j'ai trouvé qu'il manquait de structure de base*.

    Version Flexbox

    Si vous avez la chance d'utiliser Flexbox sans prendre en charge les anciens navigateurs, les pieds de page collants sont vraiment simples et supportent le redimensionnement dynamique des pieds de page.

    L'astuce pour faire coller le pied de page vers le bas à l'aide de Flexbox est de faire plier verticalement les autres éléments du même conteneur. Tout ce dont il a besoin c'est d'un élément frère avec display: flex 的全高包装元素和至少一个 flex 值大于 0 :  <子>CSS : 

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

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

    html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}
    <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

    répondre
    0
  • Annulerrépondre