Как разместить footer внизу страницы после всего содержимого?

body {
  margin: 0;
  padding: 0;
}
.header {
	height: 38px;
	width: 100%;
	background-color: #000;
	position: fixed;
	z-index: 100;
  color: #fff;
  text-align: center;
}
.footer {
	width: 100%;
	height: 97px;
	max-height: 97px; 
	position: relative;
	bottom: 0;
	background-color: red;
	z-index: 99;
  color: #fff;
  text-align: center;
}
.content {
    width: 500px;
    background-color: yellow;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 500px;
    position: relative;
    z-index: 98;
    text-align: center;
}