Header Footer Positioning

I'd like my header to stay at the very top of the body and my footer to stay at the very bottom of the body, but when I set a margin on the content div in the middle the margin affects the absolutely positioned header and footer (seen on footer - I made the header static since that gives the intended result). How do I position the header and footer to the top and bottom of the body and not have the content in the middle move those two elements?

by arelia

HTML

<header>
    <h1>Thompson Traylor McClellan Reunion</h1>
</header>

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a hendrerit velit. Phasellus sit amet diam eu arcu dapibus suscipit. Vivamus nunc justo, scelerisque at semper vel, feugiat eu quam. Cras sit amet eros et lorem ornare pellentesque. In eget consectetur erat. Maecenas mollis lectus in est congue ac blandit mi accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi bibendum condimentum varius. Nullam mauris diam, aliquet elementum lobortis interdum, ultrices ut nisi. Fusce molestie nisi id tellus ornare laoreet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec facilisis nisl quis tortor dapibus at mattis leo vestibulum. Aenean tincidunt, lorem eu suscipit molestie, elit metus ullamcorper orci, at blandit turpis lorem ac sem. Sed elit libero, rhoncus porta placerat molestie, sagittis at orci. Donec accumsan venenatis scelerisque. Donec ac nibh elit.</p>
    <p>Nunc sed leo vitae dui pellentesque pulvinar et eget nunc. Sed eget velit enim, quis suscipit nunc. Maecenas eros velit, adipiscing vel aliquet molestie, commodo accumsan ipsum. Praesent ullamcorper tristique rhoncus. Nulla in est purus. Nulla pulvinar nisl eu nisi mollis dapibus. Vivamus hendrerit tincidunt malesuada.</p>
    <p>Ut ut arcu eu ligula malesuada fermentum vel iaculis tortor. Ut massa enim, fringilla nec ultrices quis, dignissim semper orci. Nam nec libero sit amet dolor accumsan vestibulum nec ut augue. Mauris magna nisl, auctor commodo condimentum vitae, pellentesque ut nisl. Duis placerat aliquam est, at ultrices est condimentum ut. Pellentesque interdum aliquet libero eget dapibus. Phasellus id massa ut nibh aliquam suscipit nec vestibulum metus. Curabitur bibendum fermentum eros, a ultrices nunc rutrum interdum. Sed quis mauris sit amet urna ultrices tempor. Nunc tempor ipsum ut felis luctus nec condimentum quam...

CSS

* {
    box-sizing: border-box;
    position: relative;
    border: 0;
    margin: 0;
    padding: 0;
}
header {
    height: 125px;
    width: 100%;
    background: black;
    color: white;
}
footer {
    height: 50px;
    position: absolute;
    bottom: 0;
    background: black;
    color: white;
    width: 100%;
}
div {
    font: 16px/150% sans-serif;
    margin: 20px;
}