Percentage heights for header, content, footer example

Using % unit heights for header, content and footer.

by jmayes

HTML

<header>Oh hello I am a header</header>
<div id="content">I am some content</div>
<footer>I am a footer</footer>

CSS

html, body {
   height:100%;
}
header {
    background-color:#ff0000;
    height:20%
}

#content{
    background-color:#00ff00;
    height:50%;
}

 footer {
    background-color:#0000ff;
    height:30%;
 }