Footer stays at the bottom V.4

by davidxmartins

HTML

<header>title etc</header>
<div id="content">body content</div>
<footer>copyright etc</etc>

CSS

html, body { 
  height: 100%;
}
header { 
  background-color: grey;
  height: 50px;
}
footer {
  background-color: grey;
  height: 50px;
}
#content { 
  height: 100%;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  padding-top: 50px;
  margin-top: -50px;
  padding-bottom: 50px;
  margin-bottom: -50px;
}