I have been tasked with adding a "sticky footer" to the HTML output of a pre-existing document schema and custom XSL library. I began with a very simple approach of wrapping the entire body content in a div with display:flex; and flex-direction: column; and putting the sticky footer in a final child div with margin: auto 0 0 0;
This is all I needed to do to get the layout I wanted in Firefox, Chrome and Edge. But IE11 stubbornly refuses to play ball although I have tried just about every reasonable permutation of additional properties I can think of, and an additional wrapper div around everything except the footer.
The basic example can be seen at this JSFiddle.
If you open this and increase or decrease the width of the browser view region, you will see most browsers adjust the positioning of the headings and paragraphs. In IE11 however every element's starting vertical displacement is fixed, so as the view narrows items overwrite each other, and as the view widens they move apart again. The original displacement seems to be calculated assuming the browser view is maximised, and not based on the actual initial size, although I'd expect that's an artifact of whatever problem is causing the resizing behaviour.
If I have any choice I would like to avoid a workaround which involves having to add properties to every child element in the flexbox; the html is generated by some complex XSL at the lower levels which I'd rather leave alone. I can adjust the flexbody and add a flexbody-but-not-footer wrapper and I hope there is a solution which can work within those constraints.
Help please!
