CODEWITHSUNDEEP
htmlcssinternet-explorermaterialize
heron
heron

Reputation: 3661

Flexbox layout issue with Internet Explorer

Using this style guide: Materialize CSS, my page layout is like:

<header>
<main>
<footer>

Based on this article, I'm using the following CSS for a "sticky footer"

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

All browsers except Internet Explorer show the webpage with no problems.

What am I doing wrong?

Upvotes: 2

Views: 482

Answers (1)

Rakesh Guha
Rakesh Guha

Reputation: 366

Flexbox isn't supported as standard on IE versions prior to IE11: http://caniuse.com/#search=flex

However, you can add the -ms- prefix to get support on IE10. Your code would be as follows:

body {
  display: -ms-flex;
  display: flex;
  min-height: 100vh;
  -ms-flex-direction: column;
  flex-direction: column;
}
main {
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

Upvotes: 1

Related Questions