Modern way to markup 100% height layout in HTML5 and CSS3

Question

I\'ve been away from marking up sites for some time. So, now we have HTML5 and a lot of new features in CSS. I have a common site layout with fixed size header and footer. And o

Answer 1

As asking for "modern" AND "compatible" is a contraction anyway, the grid method wasn't mentioned so far, and maybe is too modern right now, but with some adaptions might be a solution.

This article (and pointers) -with more complex use- is great to read: https://developers.google.com/web/updates/2017/01/css-grid

Now the code looks nice, however browsers don't... - so I added some forcing.

https://jsfiddle.net/qLcjg6L6/1/

hdr
main
foot