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

If you need sticky footer you can make it with 2 solutions.

Solution 1:

HTML:

    Content


    Sticky Footer

CSS:

body, html, .wrap{
  height:100%;
}

body > .wrap{
  height:auto;
  min-height:100%;
}

.wrap:after {
  content: "";
  display: block;
  height: 100px; 
}

.footer{
  background:#662e8c;
  margin-top:-100px;
  height:100px;
  color:#fff;
  position:relative;
  line-height:180%;
  padding:0 10px;
}

Example: https://jsfiddle.net/ta1amejn/

---

Solution 2 (With table properties):

HTML: Content Footer

CSS:

body{
    display:table;
    width: 100%;
}

html, body{
    height:100%;
}

.main{
    height:100%;
    width:100%;
    padding-bottom:20px;
    background:#eee;
    display:table-row;
}

.footer{
    /*height:30px;*/
    line-height:30px;
    width:100%;
    background:#00f0ad;
    display:table-row;
}

Example: https://jsfiddle.net/zbtaoq1b/

---

If you want a fixed footer use this solution:

.footer{
    position: fixed;
    bottom: 0;
}