Make div stick to bottom of page

Question

So I made a contact page and I want the footer div to be sticking to the bottom of the page not right after the contact form.

But if I put everything to

Answer 1

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

   
my header
   
main content, please change height
  

    my footer
  

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;
}