<input type="checkbox" id="toggle" />
<label for="toggle"></label>
<div>
  <header>
    <p>Header</p>
  </header>
  <main>
    <p>Content</p>
  </main>
  <footer>
    <p>Footer</p>
  </footer>
</div>

/**
 * Important settings
 */
div {
  min-height: 100vh;
}
footer {
  position: sticky;
  top: 100vh;
}

/**
 * Other settings
 */
body {
  background: silver;
  margin: 0;
}
input {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  position: fixed;
  top: 0;
}
label {
  border: solid;
  border-width: 1.732rem 1rem 0;
  border-color: navy transparent;
  cursor: pointer;
  height: 0;
  width: 0;
  margin: auto;
  position: fixed;
  inset: 0;
  z-index: 10;
}
:checked ~ label {
  border-width: 0 1rem 1.732rem;
}
header {
  background: black;
  color: white;
  display: flow-root;
  text-align: center;
}
main {
  background: white;
  color: black;
  display: flow-root;
  text-align: center;
}
:checked ~ * main {
  min-height: 100vh;
}
footer {
  background: black;
  color: white;
  display: flow-root;
  text-align: center;
}