webentwicklung-frage-antwort-db.com.de

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

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 ist nicht auf den gesamten verfügbaren Platz beschränkt.

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

In IE - Wie kann ich das Hauptelement in einem flexiblen Layout strecken lassen, wenn die Höheneinheiten der Container in vh gemessen werden? Ich habe nachgesehen, ob dieses Verhalten auf einen Fehler in der Art und Weise zurückzuführen ist, wie IE die Flexbox-Spezifikationen implementiert, aber ich konnte dieses Problem an keiner anderen Stelle finden.

csscss3internet-explorer-11flexboxviewport-units
23
Ritchie Allen

Das Problem ist nicht vh Einheiten, sondern min-height

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

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

Die zusätzliche height ermöglicht IE, den Bildschirm vertikal auszufüllen, auch wenn der Inhalt nicht groß genug ist. Der Nachteil ist, dass IE den Inhalt nicht mehr umgibt, wenn er länger als der Darstellungsbereich ist.

Da dies nicht genug ist, habe ich eine Lösung in JS gemacht:

Erkennung

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

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

Der Fix besteht aus dem manuellen Festlegen 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 des Inhalts eingestellt. height wird als sekundärer min-height im IE verwendet, wobei das in der Nur-CSS-Lösung beobachtete Verhalten verwendet wird.

Verwendungszweck

Sobald diese beiden Funktionen definiert sind, richten Sie sie folgendermaßen 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>

22
bfred.it

Ich bin gestern auf diesen Fehler gestoßen und konnte ihn auch nicht selbst lösen. Leider scheint im Moment nichts dagegen zu tun zu sein, weil es IE - Fehler ist, der den Microsoft-Entwicklern vor fast einem Jahr gemeldet wurde, hier: 

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

3
covfefe

Der Trick, den ich gefunden habe, um klebrige Fußzeilen in IE11 zu erhalten, besteht darin sicherzustellen, dass flex-basis100% oder sogar 100vh ist. Bitte sehen Sie ein Beispiel unten oder ein live Codepen-Beispiel das Sie in 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>

0
souporserious