Geek Answers Handbook

Using flex: 1 to extend a div will crash everything in IE11

I used this guide to make a footer below: http://philipwalton.imtqy.com/solved-by-flexbox/demos/sticky-footer/

This manual uses a flexible box to complete the task. It worked great on Chrome and Firefox, and even Edge. But on IE11, all the elements fall on each other, as in this image:

Flex1

Code Demo:

body {
  min-height: 100%;
  position: relative;
}
.container {
  display: flex;
  min-height: 100vh;
  height: 100%;
  flex-direction: column;
}
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-color: green;
}
.Site-content {
  flex: 1;
  background-color: red;
}
footer {
  background-color: blue;
  height: 50px;
}
<body class="Site">
  <div id="react-root">
    <div class="container">
      <main class="Site-content">Site</main>
      <footer>Footer</footer>
    </div>
  </div>
</body>
Run codeHide result

Any idea how to fix this? Thanks in advance: -)

+4
source share
3 answers

Just use the following command to make it work for IE11:

html, body{
    height:100%;
}

Full code:

html, body{
    height:100%;
}

.Site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: green;
}
.Site-content {
  flex: 1;
  background-color: red;
}
footer {
  background-color: blue;
  height: 50px;
}
<body class="Site">
  <main class="Site-content">Site</main>
  <footer>Footer</footer>
</body>
Run codeHide result

working script link

+4
source 
<style>
        .Site {
            height: 100vh;
            background-color: green;
        }

        main {
            height: calc(100% - 50px);
            background-color: red;
        }

        footer {
            background-color: blue;
            height: 50px;
        }

    </style>
0

This is due to a known IE bug. You cannot use min-height and flexbox at the same time. Please refer to https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

Try updating your IE or height instead of min-height, also try to avoid vh. I think this will work for you.

body {
  min-height: 100%;
  position: relative;
}
.container {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.Site {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: green;
}
.Site-content {
  flex: 1;
  background-color: red;
}
footer {
  background-color: blue;
  height: 50px;
}
0
source

More articles:


All Articles