I use Chris' Coyer approach to make a footer been sticky at the bottom of page.
HTML
<div class="container">
<div class="content-box">
<div class="image-box">
<img src="https://i.stack.imgur.com/XIQ2T.jpg">
</div>
</div>
<div class="bottom-box">Bottom</div>
</div>
CSS:
.container {
display: flex;
flex-direction: column;
height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}
.bottom-box {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
background: #069;
color: #fff;
line-height: 3;
}
.content-box {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
}
.image-box img {
max-width: 100%;
}
It worked fine. Until I've faced the problem in Internet Explorer 11. If I put a big image to the inner box and resize it using max-width: 100% then the parent box takes a height of original image before resizing.
Actual: Parent box takes a height of original image before resizing. It works so in IE11.
Expected:
Parent box takes a height of the image after resizing. It works so in Chrome, Firefox, Safari.
JSFIDDLE: To have better understanding the problem you can take a look at code and example here: https://jsfiddle.net/v9ocv7b6/31/
Does anybody have any idea how to fix that?
