2

I am trying to get an sticky footer for my project. During my search I found this website, and I wanted to use the flexbox option.

Now does it work perfect on Chrome and Firefox, but on IE 11 it seems to have trouble with the display: flex.

I've tried using display: -ms-flexbox but it doesn't help.

Any ideas?

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0px!important;
}

.container.wrapper {
  flex: 1;
  min-height: 0px!important;
}
<html>

<head></head>

<body>
  <header></header>
  <div class="container wrapper"></div>
  <footer>abcd</footer>
</body>

</html>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
bergJ
  • 467
  • 1
  • 4
  • 11
  • Bear in mind that flexbox support on IE is quite flaky: https://caniuse.com/#feat=flexbox - See the "Known Issues" for details. – José Luis Apr 11 '17 at 10:31
  • Because that .container .wrapper gets min-height: 400px in a different stylesheet which I cant edit atm so I used the min-height: 0px to reset that. – bergJ Apr 11 '17 at 10:55
  • `min-height` is ignored by flex containers in IE. The quick solution is to make the flex container also a flex item (i.e., give the parent `display: flex`) ... https://jsfiddle.net/yLnfrebn/1/ – Michael Benjamin Apr 11 '17 at 12:08

0 Answers0