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 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?

Does not work. In this case, "Footer" appears directly below "Header" on the top of "Main". — ssougnez, Jun 22 '17 at 13:00
Ah right yes, you can just change your flex:1 to flex-grow:1 and that should work — Pete, Jun 22 '17 at 13:05

score 32 · Accepted Answer · answered Jun 22 '17 at 13:00

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>

answered Jun 22 '17 at 13:00

Asons

84,923
12
110
165

4

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
@Asons so update your answer. [This](https://stackoverflow.com/a/44700256/4854931) must be the accepted answer – Alex78191 Jul 07 '22 at 17:19
@Alex78191 -- Agree, it should, and mine still point to another issue IE has, which also has some value for users, hence I'll left it as is, and given IE is more or less gone, it really doesn't matter anymore. – Asons Jul 07 '22 at 21:08

Michael Benjamin · Answer 2 · 2017-06-22T13:31:11.720

10

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:

flex property not working in IE

edited Jun 22 '17 at 13:31

answered Jun 22 '17 at 13:04

Michael Benjamin

346,931
104
581
701

1

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

score 7 · Answer 3 · edited Jun 19 '19 at 12:57

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;
}

score 1 · Answer 4 · answered May 08 '19 at 13:57

1

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>

answered May 08 '19 at 13:57

Simon

7,182
2
26
42

`flex-grow: 1;` is not needed in this case. – Alex78191 Jul 07 '22 at 17:37

jpenna · Answer 5 · 2019-05-15T04:12:56.767

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;
  }
}

How to make a sticky footer using flexbox in IE11?

5 Answers5

Linked

Related