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 a container div with height:100%; and make footer bottom:0; then the page will be "too long", you have to scroll, etc...

My css so far:

#footer{     background-color:#fff;     font:bold 14px;     color:#1E88E5;     width:100%;     height:auto;     padding:1%;     border-top:1px solid #1E88E5; } 

Footer is just a normal full width div with some centered text atm.

Answer 1

You can probably use position: fixed to achieve this.

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

With this you will need to offset the bottom of the page so would suggest adding a padding-bottom to .main that is the height of the footer.

.main {   padding-bottom: 30px /*whatever the height of your footer is*/ }