css - align - IE11-¿Las unidades de flexbox y vh height no son compatibles?
align items center ie11 (4)
Estoy tratando de usar un diseño basado en flexbox para obtener un pie de página adhesivo para mi página. Esto funciona bien en Chrome y Firefox, pero en IE11 el pie de página se encuentra justo después de mi contenido principal. En otras palabras, el contenido principal no se extiende para llenar todo el espacio disponible.
Ejemplo aquí: http://jsfiddle.net/ritchieallen/3tpuryso/
HTML:
<body>
<header role="banner"><h1> .. </h1></header>
<main role="main">
<p>.....</p>
</main>
<footer>...</footer>
</body>
CSS:
body {
border: red 1px solid;
min-height: 100vh;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
header, footer {
background: #dd55dd;
}
main {
background: #87ccfc;
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
}
En IE: ¿Cómo puedo hacer que el elemento principal se extienda en un diseño flexible cuando las unidades de altura de los contenedores se miden en vh? Estaba buscando para ver si este comportamiento es el resultado de un error en la forma en que IE implementa las especificaciones de flexbox, pero no pude encontrar ninguna mención de este problema en otro lugar.
Ayer encontré este mismo error y tampoco pude resolverlo por mí mismo. Lamentablemente, parece que no se puede hacer nada al respecto en este momento, porque es un error de IE, que se informó a los desarrolladores de Microsoft hace casi un año, aquí:
El problema no es vh unidades sino min-height
Encontré una solución semi-funcional solo para CSS:
min-height: 100vh;
height: 100px;
La height adicional permitirá que IE llene la pantalla verticalmente incluso si el contenido no es lo suficientemente alto. El inconveniente es que IE ya no envolverá el contenido si es más largo que la ventana gráfica.
Como esto no es suficiente, hice una solución en JS:
Detección
Esta función prueba el error: true significa que está defectuoso.
function hasBug () {
// inner should fill outer
// if inner''s height is 0, the browser has the bug
// set up
var outer = document.createElement(''div'');
var inner = document.createElement(''div'');
outer.setAttribute(''style'', ''display:-ms-flexbox; display:flex; min-height:100vh;'');
outer.appendChild(inner);
(document.body || document.documentElement).appendChild(outer);
// test
var bug = !inner.offsetHeight;
// remove setup
outer.parentNode.removeChild(outer);
return bug;
}
Fijar
El arreglo consiste en configurar manualmente la height del elemento en px
function fixElementHeight (el) {
// reset any previously set height
el.style.height = ''auto'';
// get el height (the one set via min-height in vh)
var height = el.offsetHeight;
// manually set it in pixels
el.style.height = height + ''px'';
}
La altura del elemento se establecerá exactamente a la altura de su contenido. height se utiliza como una min-height secundaria en IE, utilizando el comportamiento observado en la solución solo para CSS.
Uso
Una vez que esas dos funciones están definidas, configúralo de esta manera:
if(hasBug()) {
// fix the element now
fixElementHeight(el);
// update the height on resize
window.addEventListener(''resize'', function () {
fixElementHeight(el);
});
}
Manifestación
function hasBug () {
// inner should fill outer
// if inner''s height is 0, the browser has the bug
// set up
var outer = document.createElement(''div'');
var inner = document.createElement(''div'');
outer.setAttribute(''style'', ''display:-ms-flexbox; display:flex; min-height:100vh;'');
outer.appendChild(inner);
(document.body || document.documentElement).appendChild(outer);
// test
var bug = !inner.offsetHeight;
// remove setup
outer.parentNode.removeChild(outer);
return bug;
}
function fixElementHeight (el) {
// reset any previously set height
el.style.height = ''auto'';
// get el height (the one set via min-height in vh)
var height = el.offsetHeight;
// manually set it in pixels
el.style.height = height + ''px'';
}
var output = document.getElementById(''output'');
output.innerHTML = hasBug()?''Browser is buggy'':''Browser works correctly'';
var el = document.getElementById(''flex'');
if(hasBug()) {
// fix the element now
fixElementHeight(el);
// update the height on resize
window.addEventListener(''resize'', function () {
fixElementHeight(el);
});
}
.half-screen {
display:-ms-flexbox;
display: flex;
min-height: 50vh;
padding: 10px;
background: #97cef0;
}
.content {
padding: 10px;
background: #b5daf0;
}
The inner box should fill the outer box vertically, even if the browser is buggy.
<div class="half-screen" id="flex">
<div class="content" id="output">
Text
</div>
</div>
El truco que he encontrado para que los pies de página funcionen en IE11 es asegurarse flex-basis sea del 100% o incluso de 100vh . Vea un ejemplo a continuación o un ejemplo de Codepen en vivo que puede probar en IE11.
html {
display: flex;
flex-direction: column;
}
body {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-basis: 100%;
min-height: 100vh;
}
header {
padding: 32px;
background-color: seagreen;
}
main {
flex-grow: 1;
padding: 32px;
background-color: rgba(0, 0, 0, 0.05);
}
footer {
padding: 32px;
background-color: coral;
}
<header>
Header
</header>
<main>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
<p>I will not skateboard in the halls.</p>
</main>
<footer>
Footer
</footer>
Por lo general, esto ayuda:
html, body {
height: 100%;
}
.. y no tienes que usar unidades vh .
Muestra completa
* {
margin: 0;
}
html,
body {
height: 100%;
}
body {
border: red 1px solid;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
header,
footer {
background: #dd55dd;
}
main {
background: #87ccfc;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
<header>
<h1>Herons - How they plan to eat your eyes!</h1>
</header>
<main>
Herons are foul and devious birds.
</main>
<footer>
<small>© 2014 Institute for the prevention of Herons</small>
</footer>