如何将页脚固定到页面底部？[复制]

$("#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>

$("#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>