box-sizing layout

by danield770

HTML

<header>header</header>
 <div>content</div>
<footer>footer</footer>

CSS

*
{
    margin:0;padding:0;
}
html,body
{
    height: 100%;
}
header,footer,div
{
   width: 100%; 
}
div
{
    height: 100%;
    background: pink;
    margin-top: -64px;
    padding-top: 64px;
    
    margin-bottom: -64px;
    padding-bottom: 64px;
    box-sizing: border-box;
}
header
{
    height: 64px;
    background: purple;
    position: relative;
    z-index:1;
}
footer
{
    height: 64px;
    background: gray;
}