I have a sticky footer layout, where the footer is always positioned at the bottom of the page (even if there is no content).
Everything works in all major browsers, but I have this weird issue in IE11: when I use a big image, it has non-wanted space between the end of the content, and the footer. (Looks like the image is displayed correctly, but the height isn't calculated correctly by the browser?)
This is how it should be:
* {
padding: 0;
margin: 0;
}
.site {
/*
Old IE flexbox syntax is not needed anymore for IE11 (https://caniuse.com/#search=flexbox)
display: -ms-flexbox;
*/
}
.site__container {
display: flex;
flex-direction: column;
/*In IE11, the parent element needs a height to be able to put the footer at the bottom.
(height value doesn't matter, it just needs height. example: "height: 0;")
(https://stackoverflow.com/questions/24396205/flex-grow-not-working-in-internet-explorer-11)
*/
height: 0;
min-height: 100vh;
}
.site__main {
flex: 1 0 auto;
/* Setting flex-grow: 1 on main makes it grow to fill the available space. */
}
.site__header,
.site__main,
.site__footer {
/* By default, flex-shrink is set to 1. This makes the items shrink
if there is not enough space, which happens if the content is larger than the screen.
*/
flex-shrink: 0;
}
.site__content {
padding-bottom: 30px;
}
.site__content p {
line-height: 25px;
}
.site__header {
background: red;
}
.site__main {
background: green;
}
.site__footer {
background: blue;
}
section {
/* height: 30px; */
background: salmon;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="site__container">
<header class="site__header">Header</header>
<main class="site__main">
<section>
<div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<img src="https://placehold.it/500x300" alt="" class="img-fluid">
</div>
<div class="col-12 col-md-6">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo sed molestias voluptatum perferendis ea nisi minus, illo iusto ut quaerat saepe sunt asperiores itaque pariatur earum incidunt quos culpa vero excepturi magni quod corrupti aperiam doloremque?
Esse rerum officia modi consequatur? Ex aspernatur repellat id, ut aut nam? Esse, aut?
</div>
</div>
</div>
</div>
</div>
</section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
<section><div class="col-12">
<div class="row">
<div class="container">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
</div>
</div>
</div>
</div>
</div></section>
</main>
<footer class="site__footer">Footer</footer>
</div>
</body>
</html>When I use the above example, and replace the image url by https://placehold.it/5000x3000, the green area gets much bigger and gives an unwanted padding between the content & footer, despite there being no content in there. (Remember, this issue is only in IE11, no other browsers)
