国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

communauté

Apprendre

Bibliothèque d'outils

Outils d'IA

Loisirs

Fran?ais

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

P粉716228245 2024-01-21 15:32:38

560

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

中的內(nèi)容。因此，

. Par conséquent, la hauteur du bloc

peut changer.

??????

P粉716228245

répondre à tous(2)

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

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!

Comme +0

Ajouter une réponse

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

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 的全高包裝元素和至少一個(gè) flex 值大于 0?:? p> 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>

Comme +0

Ajouter une réponse