web-dev-qa-db-fra.com

Garder le pied de page au bas de la page avec Google MDL

Autant que je sache, il ne s’agit pas d’une question en double car c’est un peu différent des autres questions sur ce sujet.

J'utilise Material Design Lite de Google et le pied de page ne restera pas correctement au bas de la page.

J'ai vu les différentes corrections en utilisant cette astuce

<div class="content">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>

et j'ai essayé d'utiliser cette méthode

#footer {
   bottom: 0;
   width: 100%;
   position: absolute; (or fixed)
}

La première option ne fonctionne pas car Material Design Lite utilise en réalité la balise de bas de page. Et pour être honnête, je ne veux pas vraiment faire ça parce que ça me semble un peu négligé.

La méthode CSS pour le pied de page fonctionne presque mais il y a quelques problèmes. Lorsque vous utilisez position: absolute;, le pied de page ne se trouve pas toujours au bas de la page et le contenu est parfois couvert. Lorsque j'essaie fixed, le pied de page est toujours conservé en bas de la page, mais lorsqu'il reste suffisamment de contenu pour que la page défile, il reste en bas de l'écran et couvre le contenu. fixed et absolute conserveront le pied de page au bas de l'écran et non la page, ce qui signifie que lorsqu'il y a suffisamment de contenu pour faire défiler le pied de page couvre le contenu au bord de l'écran.

Le comportement de fixed peut être reproduit 100% du temps, mais pour absolute je n'ai pas compris ce qui le fait parfois fonctionner et pas les autres. 

Ceci est le code que j'ai pour le pied de page

<footer class="mdl-mini-footer">
    <div class="mdl-mini-footer--left-section">
        <button class="mdl-mini-footer--social-btn social-btn social-btn__Twitter">
            <span class="visuallyhidden">Twitter</span>
         </button>
         <button class="mdl-mini-footer--social-btn social-btn social-btn__blogger">
            <span class="visuallyhidden">Facebook</span>
         </button>
         <button class="mdl-mini-footer--social-btn social-btn social-btn__gplus">
             <span class="visuallyhidden">Google Plus</span>
         </button>
     </div>
     <div class="mdl-mini-footer--right-section">
         <button class="mdl-mini-footer--social-btn social-btn__share">
             <i class="material-icons" role="presentation">share</i>
             <span class="visuallyhidden">share</span>
         </button>
     </div>
</footer>`

Est-ce que quelqu'un d'autre a eu ce problème ou a des idées sur une solution? 

Modifier pour ajouter plus d'informations:

Le problème ne concerne pas la hauteur de la variable body ou html, elles sont toutes deux à 100%.

Code de mise en page complète

<body>
  <div class="site mdl-layout mdl-js-layout">           
    <header class="mdl-layout__header mdl-layout__header--waterfall">
        <div class="mdl-layout__header-row">
            <!-- Header Content Here -->
        </div>
    </header>
    <div class="mdl-layout__drawer">
        <!-- Drawer Content -->
    </div>
    <main class="mdl-layout__content">
         <!-- View Content Here -->
    </main>
    <footer class="mdl-mini-footer">
        <!-- Footer Content -->
    </footer>
    <div class="mdl-layout__obfuscator"></div>
  </div>
</body>
htmlcssmaterial-design-lite
14
CJK

J'ai réussi à le faire en:

1. Sans tête de cascade

  1. Déplacer l'élément de pied de page en dehors de l'élément principal
  2. Définissez le style de l'élément .mdl-layout__content sur "flex: 1 0 auto"

Exemple: 

<body>
  <div class="mdl-layout mdl-js-layout">
    <header class="mdl-layout__header">
      ...
    </header>
    <main class="mdl-layout__content" style="flex: 1 0 auto;">
      ...
    </main>
    <footer class="mdl-mega-footer">
      ...
    </footer>
  </div>
</body>

2. avec en-tête cascade

  1. Il suffit de déplacer l'élément de pied de page en dehors de l'élément principal

Exemple: 

  <body>
    <div class="site mdl-layout mdl-js-layout">           
      <header class="mdl-layout__header mdl-layout__header--waterfall">
          <div class="mdl-layout__header-row">
              <!-- Header Content Here -->
          </div>
      </header>
      <div class="mdl-layout__drawer">
          <!-- Drawer Content -->
      </div>
      <main class="mdl-layout__content">
          <!-- Main Content -->
      </main>
      <footer class="mdl-mini-footer">
          <!-- Footer Content -->
      </footer>
    </div>
  </body>

Tests:

31
K.A.D.

J'avais le même problème, où un mdl-mini-footer chevauchait mon mdl-layout__content. 

Ma solution était de garder les balises séparées, c'est-à-dire.

<main class="mdl-layout__content">
  ...
</main>
<footer class="mdl-mini-footer">
  ...
</footer>

et modifiez les classes comme suit (en vous inspirant de la première solution de @ K.A.D ci-dessus)

.mdl-layout__content {
  flex: 1 0 auto;
}

.mdl-mini-footer {
  flex: 0 0 auto;
}

La modification de la classe de pied de page était nécessaire pour empêcher le pied de page de se transformer en espaces non souhaités (le premier 0 dans 0 0 auto).

4
mattsch

Essaye ça

    <main class="mdl-layout__content">
        <div class="page-content">

        </div>
        <div class="mdl-layout-spacer"></div>
        <footer class="mdl-mini-footer">
            <div class="mdl-mini-footer__left-section">
                <div class="mdl-logo">Title</div>
                <ul class="mdl-mini-footer__link-list">
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Privacy & Terms</a></li>
                </ul>
            </div>
        </footer>
    </main>

Il suffit d'ajouter:

<div class="mdl-layout-spacer"></div>

Après:

<div class="page-content"></div>
2
Grandong

J'ai fait face au même problème que toi. Après avoir parcouru de nombreux tutoriels et 2 questions de ce type, j'ai jeté un coup d'œil à l'un des modèles fournis par MDL et j'ai constaté que le pied de page était inclus dans la section principale. Je trouve cela très contre-intuitif, mais l'élément de pied de page doit être spécifié juste avant la balise de fermeture, PAS après. Voir la capture d’écran du balisage qui fonctionne correctement. Je travaille sur le site Web de TEDx GEC. Visitez le site Web de tedx GEC pour voir le pied de page en action. Voici la capture d'écran: Notez que la balise principale de fermeture se trouve après le pied de page.

0
Saheel Wagh