Sind Flexbox und vh-Höheneinheiten in IE11 nicht kompatibel?

Question 1

Ich versuche, ein Flexbox-basiertes Layout zu verwenden, um eine klebrige Fußzeile für meine Seite zu erhalten. Dies funktioniert gut in Chrome und Firefox, aber in IE11 befindet sich die Fußzeile direkt nach meinem Hauptinhalt. Mit anderen Worten, der Hauptinhalt wird nicht so gestreckt, dass er den gesamten verfügbaren Platz ausfüllt.

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

<body>
    <header role="banner"><h1> .. </h1></header>
    <main role="main">
        <p>.....</p>
    </main>
    <footer>...</footer>
</body>

Wie kann ich das Hauptelement dazu bringen, sich in einem Flex-Layout zu dehnen, wenn die Container-Höheneinheiten gemessen werden? vh im IE? Ich habe nachgesehen, ob dieses Verhalten das Ergebnis eines Fehlers in der Art und Weise ist, wie IE die Flexbox-Spezifikationen implementiert, aber ich konnte nirgendwo anderswo eine Erwähnung dieses Problems finden.

JSFiddle-Demo

Question 2

Das Problem ist nicht vh Einheiten aber min-height

Ich habe eine halb funktionierende reine CSS-Lösung gefunden:

min-height: 100vh;
height: 100px;

Das Extra height ermöglicht dem IE, den Bildschirm vertikal auszufüllen, selbst wenn der Inhalt nicht groß genug ist. Der Nachteil ist, dass IE den Inhalt nicht mehr umbricht, wenn er länger als der Darstellungsbereich ist.

Da dies nicht ausreicht, habe ich eine Lösung in JS erstellt:

Erkennung

Diese Funktion testet den Fehler: true bedeutet, es ist fehlerhaft.

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

Fix

Die Lösung besteht in der manuellen Einstellung der height des Elements in 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'; 
}

Die Höhe des Elements wird genau auf die Höhe seines Inhalts gesetzt. height wird sekundär verwendet min-height im IE unter Verwendung des Verhaltens, das in der reinen CSS-Lösung beobachtet wurde.

Verwendungszweck

Sobald diese beiden Funktionen definiert sind, richten Sie sie wie folgt ein:

if(hasBug()) {
    // fix the element now
    fixElementHeight(el);

    // update the height on resize
    window.addEventListener('resize', function () {
        fixElementHeight(el);
    });
}

Demo

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>

Question 3

Ich bin gestern auf denselben Fehler gestoßen und konnte ihn auch nicht selbst lösen. Leider scheint im Moment nichts dagegen getan werden zu können, denn es handelt sich um IE-Fehler, die den Microsoft-Entwicklern vor fast einem Jahr hier gemeldet wurden:

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

Question 4

Der Trick, den ich gefunden habe, um klebrige Fußzeilen in IE11 zum Laufen zu bringen, besteht darin, sicherzustellen flex-basis ist 100% oder auch 100vh. Bitte sehen Sie sich ein Beispiel unten an oder a Live-Codepen-Beispiel die Sie im IE11 testen können.

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>

Question 5

Meist hilft das:

html, body {
   height: 100%;
}

.. und Sie müssen nicht verwenden vh Einheiten.

Vollständige Probe:

* {
  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>