Answer by nghiepit for Make div stick to bottom of page

You can do that easily with the display: flex. You don't care about height body or wrapper tag.

Example: Please change the height of main tag any value if you want, footer always sticky to bottom(not position: fixed).

https://codepen.io/tronghiep92/pen/dzwRrO

HTML markup

<div id="wrapper">
   <header>my header</header>
   <main>main content, please change height</main>
  <footer>
    my footer
  </footer>
</div>

CSS Solution

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
  margin-top: auto; /* this is the solution */
}

main {
  height: 100px
}

Or you can:

#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
}

main {
  flex: 1;
  height: 100px;
}