html - Internet Explorer no respeta mi altura mínima: 100% con flexbox
css html5 (6)
He estado revisando todas las soluciones de min-height: 100% en StackOverflow y en la web y parece que no puedo encontrar una que se ajuste a mis necesidades (relativamente simples).
Esto es lo que quiero:
- Tengo un contenedor de dos columnas, y ambas columnas deben estirarse para que tengan la misma altura.
- Cuando el contenido no llena la pantalla, las columnas deben extenderse hasta la altura de la ventana completa.
- Estoy feliz de usar flex-box, pero prefiero no usar hacks JS si es posible.
Código de ejemplo:
http://codepen.io/anon/pen/dwgDq?editors=110
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="nav">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
</div>
<div class="content">
<p>Content 1</p>
<p>Content 2</p>
<p>Content 3</p>
<p>Content 4</p>
<p>Content 5</p>
<p>Content 6</p>
<p>Content 7</p>
<p>Content 8</p>
</div>
</div>
</body>
</html>
html, body { height: 100%; margin: 0; }
.wrapper {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.container {
display: flex;
align-items: stretch;
min-height: 100%;
}
.nav {
background: grey;
width: 200px;
}
.content {
flex-grow: 1;
background: yellow;
}
Esto funciona perfectamente en Safari y Chrome.
Parece como si IE (v11 en mi caso) no respeta mi altura mínima y, por lo tanto, las columnas no ocupan la altura de la pantalla. Por lo que leí, IE6 + 7 tenía problemas con tratar la altura como la altura mínima, pero esta es una reliquia del pasado y hace mucho tiempo cuando se usa un doctype HTML5.
¿Cómo hago para que IE cumpla con mi altura mínima?
¿Cómo hago para que este diseño funcione?
Aquí está la solución:
HTML
<body>
<header>Header</header>
<main>Here comes the content ...</main>
<footer>Footer</footer>
</body>
CSS
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header, footer {
flex-shrink: 0;
}
main {
flex: 1 0 auto;
}
jsfiddle: http://jsfiddle.net/d5syw3dc/
Hay otra solución para este problema.
En tu caso puedes usar un pseudo elemento para estirar la fila:
En primer lugar usar 100vh en lugar de 100%.
.container {
display: flex;
align-items: stretch;
min-height: 100vh;
}
Después de eso, simplemente agregue un pseudo elemento a .container con exactamente el mismo valor de altura
.container::after{
content: '''';
height: 100vh;
visibility: hidden;
}
Aquí, vea mi codepen http://codepen.io/anon/pen/LVazgQ
Tener a los hijos de su display: flex element heredó la altura mínima fue una solución rápida para mí en IE, sin agregar ningún elemento adicional. También funciona como se espera con el desbordamiento.
HTML:
<div class="container">
<div class="col-1">Col 1</div>
<div class="col-2">Col 2</div>
</div>
CSS:
body {
margin: 0;
min-height: 100vh;
}
.container {
min-height: inherit; /* or 100vh or whatever you want */
display: flex;
}
.container > * {
min-height: inherit; /* use the full height of the container, works with overflow */
}
.col-1 {
background: red;
flex-grow: 1; /* half the screen width */
}
.col-2 {
background: blue;
flex-grow: 1; /* half the screen width */
}
height: 100% USO height: 100% para IE
IE ignorará la propiedad de min-height aquí, pero chrome seleccionará.
No estoy seguro de la razón, pero espero que funcione bien.
.container {
display: flex;
align-items: stretch;
height: 100%;
min-height:100%;
}
Codepen
min-height no funciona en IE10 / 11 cuando se asocia con un diseño flexible (verifique el informe de errores ). Use otro contenedor flexible para arreglarlo.
Edit: Me di cuenta de que no estaba respondiendo a la publicación original, confundido por la respuesta a la votación. Así que, aquí vamos:
Diseño de dos columnas
HTML
<div class="ie-fixMinHeight">
<div id="page">
<div id="sidebar"></div>
<div id="content"></div>
</div>
</div>
CSS
.ie-fixMinHeight{
display:flex;
}
#page {
min-height:100vh;
width:100%;
display:flex;
}
#content {
flex-grow:1;
}
No utilice el diseño de flexbox directamente en el body que enrosca los elementos insertados a través de complementos jQuery (autocompletar, emergente, etc.)
Aquí el diseño fijo basado en su código.
Pie de página pegajoso
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;
}
Ver una demostración de trabajo .
EDITAR: la respuesta de Thomas muestra una manera de lograr lo que quería sin usar min-height, lo que significa que funciona bien en IE.
Terminé resolviendo este problema con Javascript, aunque admito que es un código absolutamente desagradable y una solución bastante dependiente de la implementación. Cada vez que mi elemento de contenido principal cambia de tamaño, desactivo la propiedad de altura, mido el contenedor para decidir si la propiedad de altura es realmente necesaria, y luego la sustituyo si es necesario. Es como si escribiera mi propia implementación de min-height. Un inconveniente importante de este enfoque es que IE no proporciona eventos adecuados cuando los elementos cambian de tamaño o cuando el contenido cambia dentro de un elemento, y sin estos eventos, debe usar un temporizador setInterval y medir el elemento usted mismo. Bruto.
Además de mi propia solución, hablé con la gente del equipo de IE que trabaja en flexbox. Reconocieron que el error todavía existe en la producción de hoy, pero aún me instaron a encontrar una manera de solucionarlo sin JS. La única ventaja que me dieron fue utilizar el diseño específico de IE -ms-grid . No estoy familiarizado con estos, pero informaré y actualizaré esta respuesta si tengo tiempo para investigar.