html - ¿Cómo hacer un pie de página adhesivo usando flexbox en IE11?

css internet-explorer-11

Question

Estoy tratando de hacer un diseño simple con flexbox pero tengo problemas con IE11. Básicamente, quiero un pie de página que se pegue en la parte inferior solo si el contenido no es lo suficientemente alto. No tengo ningún problema para hacer eso con Chrome así:

*,
*: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>

Simplemente juegue con el número de <p>main</p> para ver el comportamiento incorrecto con IE11.

¿Hay alguna manera de lograr esto sin JavaScript?

Answer 1

Dado que esta podría ser una solución deseada: si no necesariamente desea hacer crecer la etiqueta main pero aún así alinear el pie de página en la parte inferior:

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>

Answer 2

En main , en lugar de flex: 1 use flex: auto . Eso deberia ser todo lo que necesitas.

La regla flex: 1 taquigrafía se desglosa en:

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

La regla flex: auto taquigrafía flex: auto se desglosa en:

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

IE tiene problemas para analizar flex-basis: 0 .

Más información:

• La propiedad flex no funciona en IE

Answer 3

Esta respuesta ( @ceindeg answer ) funcionó parcialmente para mí, pero redujo el tamaño del contenedor principal y tenía un fondo que quería ubicar en la parte inferior.

Así que simplemente fui a la position: absolute para el pie de página solo para IE.

Puede usar una consulta de medios solo para IE, por lo que los otros navegadores funcionan bien (eche un vistazo aquí: ¿Cómo apuntar solo a IE (cualquier versión) dentro de una hoja de estilo? ).

En mi caso, quería apuntar a IE10 e IE11, así que usé esto:

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

Answer 4

IE tiene un error de min-height y necesita display: flex en los contenedores de la columna flex padre, en este caso el html

Demo de violín

Actualiza tu CSS así

*,
*: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>

Answer 5

Una solución que realmente me ayudó (puede que no sea aplicable en todos los casos) es agregar una altura fija arbitraria en píxeles: la altura mínima anula la altura fija para que no haya contenido recortado. Aquí hay un ejemplo de 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;
}