Sticky footer doesn't work in IE 11 when content is added

[HJK181]

Description

The app-header-layout sticky footer demo doesn't work when content is added into the content div.

Expected outcome

The sticky footer is at the bottom of the inserted content

Actual outcome

The sticky footer stays at it's initial position at the view port bottom, not at the bottom of the content.

Live Demo

Steps to reproduce

1. Put a sample-content element with size of 50 into the content div of the demo.
2. Open the page in IE 11
3. Scroll down and see the footer staying at its initial position.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[frankiefu]

The app-layout/app-header-layout/demo/footer.html demo seems to work fine for me in IE11 now. Please let us if you still see the issue.

[abdonrd]

I have the same issue:

[keanulee]

If this is IE11 specific, it could be a bug with their vertical flexbox layout. In the footer demo, the <div class="content"> element is flex: 1 so it should take up the remainder of the vertical space.