web-dev-qa-db-fra.com

Comment faire un pied de page collant en utilisant flexbox dans IE11?

J'essaie de faire un design simple avec flexbox mais j'ai des problèmes avec IE11. Fondamentalement, je veux un pied de page qui ne colle au fond que si le contenu n'est pas assez élevé. I n'ai aucun problème à le faire avec Chrome comme ceci:

*,
*:after,
*:before {
  box-sizing: border-box;
}

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

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}
<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

Jouez avec le nombre de <p>main</p> pour voir le mauvais comportement avec IE11.

Existe-t-il un moyen d'y parvenir sans JavaScript?

htmlcssflexboxinternet-explorer-11
16
ssougnez

IE a un min-height bogue et besoins display: flex sur le parent des conteneurs de colonnes flexibles, dans ce cas le html

Démo Fiddle

Mettez à jour votre CSS comme ceci

*,
*:after,
*:before {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  display: flex;
}
body {
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex-grow: 1;
}
<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>
28
LGSon

Sur main, au lieu de flex: 1 utilisation flex: auto. Cela devrait être tout ce dont vous avez besoin.

Le flex: 1 la règle de raccourci se décompose en:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

Le flex: auto la règle de raccourci se décompose en:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: auto

IE a du mal à analyser flex-basis: 0.

Plus d'information:

8
Michael_B

Une solution qui m'a vraiment aidé (peut ne pas être applicable dans tous les cas) consiste à ajouter une hauteur fixe arbitraire en pixels - la hauteur min remplace la hauteur fixe, donc il n'y a pas de contenu recadré. Voici un exemple CSS:

.fullheight {
    min-height: 100vh;
    height: 200px; /*IE 11 flexbox min-height fix*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}
7
ceindeg

Puisque cela pourrait être une solution souhaitée: si vous ne voulez pas nécessairement agrandir la balise main mais toujours aligner le pied de page en bas:

html, body {
  margin: 0;
  display: flex;
}
html {
  height: 100%;
}
body {
  flex-flow: column nowrap;
  flex-grow: 1;
}
footer {
  margin-top: auto;
}
<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>
0
Simon

Cette réponse ( @ ceindeg answer ) a fonctionné en partie pour moi, mais a réduit la taille du conteneur parent, et j'avais un arrière-plan que je voulais positionner en bas.

Je suis donc allé à position: absolute pour le pied de page uniquement pour IE.

Vous ne pouvez utiliser une requête multimédia que pour IE, donc les autres navigateurs fonctionnent correctement (jetez un œil ici: Comment cibler uniquement IE (n'importe quelle version) dans une feuille de style? ).

Dans mon cas, je voulais viser IE10 et IE11, alors j'ai utilisé ceci:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  footer {
   position: absolute;
   bottom: 0;
  }


  .parent-container {
    position: relative
    // Add some padding-bottom to the parent container so it won't be glued together
    padding-bottom: 30px;
  }
}
0
jpenna