<header>
  <h1>Sticky Header Example</h1>
</header>
<main>
  <p>
  Play with the buttons to add and remove content and see how the footer stays at the bottom of the page.
  </p>
  </div>
  <div>
    <button id="add">Add Content</button>
    <button id="remove">Remove Content</button>
  </div>
  <div id="ipsums">
  </div>
</main>
<footer>
  <p>This demo was made by <a href="https://codelab.farai.xyz">Farai Gandiya</a> for the article <a href="https://codelab.farai.xyz/snippets/sticky-flex-footer/">Sticky Footer Using Flexbox With Just 4 CSS Declarations</a>.</p>
</footer>

/*
  Flexbox stuff
*/
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}


/*
  Document Setup.
*/
* {
  box-sizing: border-box;
}

body {
  font-family: "Comic Sans MS", "Marker Felt", ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  margin: 0;
  line-height: 1.5;
}

body > * {
  padding: 0.5rem;
}

header, footer {
  background-color: palegoldenrod;
  text-align: center;
}

main {
  align-self: center;
  max-width: 80ch;
}

main > div {
  text-align: center;
}

const visibleIpsums = [];

add.onclick = function () {
  ipsums.innerHTML += `<p>Yo dawg, I heard you like content so I've added some content. Here you go! I hope you like it. If so, <a href="https://codelab.farai.xyz/support/">support my work</a>.</p>`
}

remove.onclick = function () {
  if (ipsums.lastChild) {
    ipsums.lastChild.remove()
  }
}