How to make a sticky footer using flexbox in IE11?

Question

I\'m trying to make a simple design with flexbox but I\'m having trouble with IE11. Basically, I want a footer that sticks to the bottom only if the content is not high enou

Answer 1

This answer (@ceindeg answer) partially worked for me, but shrunk the parent container size, and I had a background I wanted to position at the bottom.

---

So I just went to position: absolute for the footer only for IE.

You can use a media-query only for IE, so the other browsers work fine (take a look here: How to target only IE (any version) within a stylesheet?).

In my case, I wanted to aim IE10 and IE11, so I used this:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  footer {
   position: absolute;
   bottom: 0;
  }


  .parent-container {
    position: relative
    // Add some padding-bottom to the parent container so it won't be glued together
    padding-bottom: 30px;
  }
}