Static slide-under header

by steveukx

HTML

<header>
    header header<br />
    header header<br />
    header header
</header>
<footer>
    blah blah blah<br />
    blah blah blah<br />
    blah blah blah<br />
    blah blah blah<br />
    blah blah blah
</footer>
<section></section>

CSS

body, html {
    padding: 0; margin: 0;
    font: 12pt/1.5 "Lucida Sans Unicode";
}
header {
    background: #ccc; text-align: center;
    height: 100px;
    top: 0; left: 1rem;
    position: fixed;
    z-index: 1; box-sizing: border-box;
    border-radius: 0 0 1rem 1rem; padding: 0.5rem 1rem;
    box-shadow: -1px 1px 5px rgba(0,0,0,0.5);
}
section {
    background: navy;
    height: 1000px;
    width: 100%;
    left: 0;
    margin-top: 151px;
    box-shadow: 0 0px 20px 10px rgba(0,0,0,0.5);
    position: absolute;
}
footer {
    background: red;
    text-align: right; padding: 1rem;
    color: white;
    width: 100%; box-sizing: border-box;
    top: 0; left: 0;
    position: fixed;
    -webkit-transform: translateZ(0);
}