<header><h2>Sticky Footer with Flexbox</h2></header>
  <main>
    <button>Add Paragraph</button> <button>Remove Paragraph</button>
    <p>This page is using a typical header/footer combo. The footer is positioned using flexbox so that it stays at the bottom of the page even if the content doesn't fill the entire page vertically. If this content goes past the length of the page, the footer will behave like a regular footer and will continue to get pushed down. Therefore it will only stay at the bottom of the viewport when the content is less than the height of the viewport. Use the buttons above to add or remove extra paragraphs so you can see how the footer responds.</p>
  </main>
  <footer><h2>Sticky Footer</h2></footer>

html {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

header, footer {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  background: #ccc;
  padding: 5px;
  text-align: center;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  text-align: center;
  padding: 14px;
}

button {
  padding: 7px 10px;
  margin: 0 0 8px 0;
}

@media (max-width: 480px) {
  body {
    font-size: 16px;
  }
}

document.querySelector('button').addEventListener('click', function () {
  document.querySelector('main')
          .appendChild(document.querySelector('p').cloneNode(true));
}, false);

document.querySelectorAll('button')[1].addEventListener('click', function () {
  if (document.querySelectorAll('p')[1]) {
    document.querySelector('p').remove();
  }
          
}, false);