16

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 enough. I have no issue doing that with Chrome like this:

*,
*: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>

Just play with the number of <p>main</p> to see the wrong behaviour with IE11.

Is there a way to achieve this without JavaScript?

TylerH
  • 20,816
  • 57
  • 73
  • 92
ssougnez
  • 4,735
  • 9
  • 38
  • 70

5 Answers5

32

IE has a min-height bug and needs display: flex on the flex column containers parent, in this case the html

Fiddle demo

Update your CSS like this

*,
*: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>
Asons
  • 81,773
  • 12
  • 93
  • 144
  • 3
    The `min-height` bug wasn't the issue in this case. But `flex-grow: 1` does the trick because when you remove `flex: 1` it resets `flex-basis` to the `auto` default. – Michael Benjamin Jun 22 '17 at 13:15
  • 1
    @Michael_B I figured that one out just now, after your comment by your answer, so thanks again – Asons Jun 22 '17 at 13:16
9

On main, instead of flex: 1 use flex: auto. That should be all you need.

The flex: 1 shorthand rule breaks down to:

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

The flex: auto shorthand rule breaks down to:

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

IE has trouble parsing flex-basis: 0.

More information:

Michael Benjamin
  • 307,417
  • 93
  • 525
  • 644
  • This works too..+1. Still, how come `flex: auto` becomes `1 1 auto` when the default is `0 1 auto`? – Asons Jun 22 '17 at 13:10
  • 1
    Aha, thanks....really missed that before, thought it only changed the flex basis (I belong to the older generation and we don't read manuals :) – Asons Jun 22 '17 at 13:12
7

A solution that really helped me (may not be applicable in all cases) is adding an arbitrary fixed height in pixels - the min-height overrides the fixed height so there's no cropped content. Here's a CSS example:

.fullheight {
    min-height: 100vh;
    height: 200px; /*IE 11 flexbox min-height fix*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}
TylerH
  • 20,816
  • 57
  • 73
  • 92
ceindeg
  • 438
  • 5
  • 9
0

Since this might be a desired solution: if you don't necessarily want grow the main tag but still align the footer at the bottom:

html, body {
  margin: 0;
  display: flex;
}
html {
  height: 100%;
}
body {
  flex-flow: column nowrap;
  flex-grow: 1;
}
footer {
  margin-top: auto;
}
<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>
Simon
  • 6,987
  • 2
  • 24
  • 42
0

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;
  }
}
jpenna
  • 6,921
  • 5
  • 26
  • 35