Как закрепить footer внизу страницы?

Question

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

Пример:

Answer 1

Через отрицательный margin на css:

$("#add").on("click", function() {
  $("<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel pariatur quod architecto quasi tempora exercitationem rerum delectus, consequuntur totam saepe laboriosam deserunt quam necessitatibus adipisci libero vitae tempore mollitia sunt, minus beatae? Ex consequuntur fugit, quis vel doloribus sequi minima dolores voluptatem ullam, quod beatae qui dolor facere explicabo perspiciatis.</p>").insertBefore(".push");
});

html,
body {
  height: 100%;
  margin: 0;
}
.content {
  padding: 20px;
  min-height: 100%;
  margin: 0 auto -50px;
}
.footer,
.push {
  height: 50px;
}

{
box-sizing: border-box;

}
body {
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 20px 0 0 0;
}
footer {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <h1>Плавающий footer</h1>
  <p><button id="add">Добавить контент!</button></p>
  <div class="push"></div>
</div>

<footer class="footer">
  Футер
</footer>

Основной контент оборачиваешь в div.content.

Flexbox:

Рекомендовал бы именно это решение

$("#add").on("click", function() {
  $("<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel pariatur quod architecto quasi tempora exercitationem rerum delectus, consequuntur totam saepe laboriosam deserunt quam necessitatibus adipisci libero vitae tempore mollitia sunt, minus beatae? Ex consequuntur fugit, quis vel doloribus sequi minima dolores voluptatem ullam, quod beatae qui dolor facere explicabo perspiciatis.</p>").appendTo(".content");
});

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.content {
  flex: 1 0 auto;
  padding: 20px;
}
.footer {
  flex-shrink: 0;
  padding: 20px;
}

{
box-sizing: border-box;

}
body {
  margin: 0;
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 0 0 20px 0;
}
footer {
  background: #42A5F5;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <h1>Плавающий футер на Flexbox</h1>
  <p><button id="add">Добавить контент</button></p>
</div>

<footer class="footer">
  Футер
</footer>