All geek questions in one place

How to make sticky footer using flexbox in IE11?

I am trying to make a simple design with flexbox, but I have problems with IE11. Basically, I want the footer to be at the bottom only if the content is not high enough. I have no problem with Chrome:

*, *: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 <p>main</p> to see the wrong behavior with IE11.

Is there a way to achieve this without JavaScript?

+15
source share
6 answers

IE has a min-height error and needs display: flex in the parent containers of flex columns, in this case html

Demo screenshot

Update your CSS as follows

 *, *: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>
+27
source

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

The abbreviated flex: 1 rule is broken down into:

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

The hidden flex: auto rule breaks into:

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

IE has a problem with parsing flex-basis: 0 .

Additional Information:

+7
source

The solution that really helped me (maybe not applicable in all cases) is to add an arbitrary fixed height in pixels - the minimum height overrides the fixed height, so there is no cropped content. Here is 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; }
+7
source

Since this may be a desirable solution: if you do not want to increase the main tag, but still align the footer below:

 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>
0
source

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

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

You can use the media query only for IE, so other browsers work fine (look here: how to target only IE (any version) in the stylesheet? ).

In my case, I wanted to target 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; } }
0
source

The best cross-browser solution I've found with the fewest errors:

 /** * 1. Avoid the IE 10-11 'min-height' bug. * 2. Set 'flex-shrink' to '0' to prevent Chrome, Opera, and Safari from * letting these items shrink to smaller than their content default * minimum size. */ .Site { display: flex; flex-direction: column; height: 100vh; /* 1 */ } .Site-header, .Site-footer { flex-shrink: 0; /* 2 */ } .Site-content { flex: 1 0 auto; /* 2 */ } 
 <body class="Site"> <header class="Site-header">…</header> <main class="Site-content">…</main> <footer class="Site-footer">…</footer> </body>

Source and explanation: normalization of Flexbox cross-browser errors

0
source

Source: https://habr.com/ru/post/1269107/

More articles:


All Articles