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

Question

[Василий Петров]

Примерно такая структура — codepen.io/anon/pen/yMNBOQ Необходимо, чтобы footer был в самом низу страницы после "content" (см. код).

Answer 1

[Janny]

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;
}

Comments

[Василий Петров]

Блин... так просто. Спасибо

Answer 2

[Ivan Bogachev]

Не знаю, что вы имели в виду делая всему, что есть, position: absolute и fixed и большие значения z-index, но вам определенно стоит посмотреть сюда.

Comments

[Василий Петров]

Это только часть кода. position и z-index мне нужны, а большие значения ни на что не влияют, просто так сделал

[Василий Петров]

Какая-то непонятная магия в вашем коде :D