Flexbox, min-height und IE11

Question

Ich versuche, ein einfaches Design mit flexbox zu machen, aber ich habe Probleme mit IE11. Grundsätzlich möchte ich eine Fußzeile, die nur dann an der Unterseite bleibt, wenn der Inhalt nicht hoch genug ist. Ich habe kein Problem, das wie dies mit Chrome tun:

*, 
 
*:after, 
 
*:before { 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
main { 
 
    flex: 1; 
 
}

<header> 
 
    Header 
 
</header> 
 
<main> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
</main> 
 
<footer> 
 
    Footer 
 
</footer>

nur mit der Anzahl der <p>main</p> spielt das falsche Verhalten mit IE11 zu sehen.

Gibt es eine Möglichkeit, dies ohne JavaScript zu erreichen?

Answer 1

IE hat einen min-height Fehler und muss display: flex auf der flexiblen Spaltencontainer Eltern, in diesem Fall die html

Fiddle demo

Aktualisieren Sie Ihre CSS ähnliche

*, 
 
*:after, 
 
*:before { 
 
    box-sizing: border-box; 
 
} 
 
html, body { 
 
    margin: 0; 
 
    display: flex; 
 
} 
 
body { 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
} 
 
main { 
 
    flex-grow: 1; 
 
}

<header> 
 
    Header 
 
</header> 
 
<main> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
    <p>Main</p> 
 
</main> 
 
<footer> 
 
    Footer 
 
</footer>

Answer 2

Auf main, anstelle von flex: 1 verwenden Sie flex: auto. Das sollte alles sein, was du brauchst.

---

Die flex: 1 Stenografie Regel bricht an:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

Die flex: auto Stenografie Regel bricht an:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: auto

IE hat flex-basis: 0 Probleme Parsen.

Weitere Informationen:

• flex property not working in IE