How to Make a Sticky Footer Using Flexbox in Ie11

How to make a sticky footer using flexbox in IE11?

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>

How Do I Fix A Flexbox Sticky Footer In IE11

Try

flex: 1 0 auto;

for content block

Why does IE11 push down my sticky footer out of the viewport in flex?

When using flex-direction: column in IE11, you need to set a height on that element because IE has issues setting the height in that scenario (even if you have a min-height defined). If you give your body a height: 100vh, that should fix it.

If you don't want your footer to always be visible on the bottom, you'll want to wrap all your elements in a div and set your current body flex styles onto that. This way you'll be able to use min-height on the body and still add a definite height: 100% on your app wrapper div.

See this site for more detailed info on all flex bugs:
https://github.com/philipwalton/flexbugs#flexbug-3

Here's an example snippet in the most simplest form. Generally, I haven't put flex layouts directly on the html or body elements. Not sure if this cause issues or not. The biggest difference from your structure is that I use the .app to wrap everything including the footer, so that I can apply flex styling on that, and use the .main as the flexible element that pushes the footer to the bottom.

html,body {

  height: 100vh;

  margin: 0;

}

.app {

  display: flex;

  flex-direction: column;

  height: 100%;

}

header,

footer {

  flex: 0 0 auto;

}

.main {

  flex: 1 1 auto;

}

/* presentation only */

header,

footer {

  background: salmon;

  padding: 12px;

}

.main {

  background: lightgray;

  padding: 12px;

}

<div class="app">

  <header> header</header>

  <div class="main"> main </div>

  <footer>footer</footer>

 </div>

Flexbox footer element does not stick to bottom in IE11

Have a read at http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ for a full explanation.

The actual solution apply the following changes

#rap{height:100vh;}/*change min-height to height*/
#rap > header,
#rap > footer{flex-shrink:0}
#rap > main{flex: 1 0 auto;}

Sticky footer weird IE11 behavior

 <body style="overflow:scroll;">  

<div class="main clearfix">

  <div class="content contentclosed clearfix">
    <div class="maincontent clearfix" style="position:absolute;">

      <div id="main">

        <section id="znalosti">

                sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text

       </section><!-- end #znalosti -->
      </div><!-- end #main -->
    </div>
    <div class="footer clearfix" style="position:relative;">
        <div class="container">
            <br> </br>
            <p>
            sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text
                </p>
        </div>
    </div>       
  </div>

</div>

</body>

I added the overflow scroll to body, position:absolute to the maincontent. Wrapped your footer content in a p and added a line break at the top, and position relative to the footer. You can see my changes inline in the HTML. That worked but all of those things might not be necessary. I am not 100% sure what you are trying to accomplish but I hope that helps.

it worked when i added "overflow:scroll; min-height:2000px;" to your in IE

IE11 - a footer at the bottom of the page that gets pushed down if height of content above is greater than height of window

Turns out changing the css of upper flex container as follows:

.upper-flex-container {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

solves the issue. Not fully sure why though, seems to be IE11 specific.

https://jsfiddle.net/4xtjw35k/4/

How to Make a Sticky Footer Using Flexbox in Ie11