Flexbox e Internet Explorer 11 (pantalla: flex in <html>?)



Answers

Utilice otro contenedor flexible para solucionar el problema de min-height en IE10 e IE11:

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

Vea una demostración funcional .

  • No utilice el diseño de la caja flexible directamente en el body que atornillará los elementos insertados a través de los complementos jQuery (autocompletado, emergente, etc.).
  • No use height:100% o height:100vh en su contenedor porque el pie de página se pegará en la parte inferior de la ventana y no se adaptará al contenido largo.
  • Utilice flex-grow:1 lugar de flex:1 causa que los valores por defecto de IE10 e IE11 para flex sean 0 0 auto y no 0 1 auto .
Question

Estoy planeando alejarme de los diseños "flotantes" y usar css flexbox para proyectos futuros. Me alegré de ver que todos los principales navegadores en sus versiones actuales parecen ser compatibles (de una manera u otra) con flexbox.

Me dirigí a "Solucionado por Flexbox" http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ para ver algunos ejemplos. Sin embargo, el ejemplo de "pie de página fijo" no parece funcionar en IE11. Jugué un poco y lo puse a funcionar agregando display:flex al <html> y width:100% al <body>

Entonces mi primera pregunta es: ¿Alguien puede explicarme esa lógica? Simplemente jugueteé y funcionó, pero no entiendo por qué funcionó de esa manera ...

Luego está el ejemplo de "Objeto multimedia" que funciona en todos los navegadores, excepto - lo adivinaste - IE. Jugué con eso también, pero sin éxito.

Por lo tanto, mi segunda pregunta es: ¿hay una posibilidad "limpia" para que el ejemplo de "Objeto multimedia" funcione en IE?




Aquí hay un ejemplo del uso de flex que también funciona en Internet Explorer 11 y Chrome.

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>




Related