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 you asked for "modern"... anno 2016 I have maybe a better answer than in 2013:

use the 100vh solution in CSS3. vh is a new unit and stands for ViewPort height.

html, body {            height:                 100% } 
header {                height:                 100px }
footer {                height:                 50px }
main {                  height:                 calc(100vh - 150px); }

html, body {            width:                  100% }  
header, main, footer {  width:                  1000px }

html, body {            margin:                 0 }
header, main, footer {  margin:                 0 auto }

html, body {            padding:                0 }

html, body {            text-align:             center }

body {                  background-color:       white } 
header {                background-color:       yellow }
main {                  background-color:       orange }
footer {                background-color:       red }

bla
bla
bla

But if you wish to be compatible with old browsers, use the code in my 2013 answer.