How can I make my footer align to the very bottom?

Question

I'm new with CSS and have looked up many ways, but can't get the footer to align to the bottom. Any help? Thank you.

.footer {
    position: bottom;
    bottom: -10px;
    height: 30px;
    width: 100%;
    background-color: #171717;
    color: white;
}

Answer 1

Change position to fixed.

.footer {
    position:fixed;
    bottom:0px;
    height:30px;
    width:100%;
    background-color:#171717;
    color:white;
}

Answer 2

I would also add the left property in case there are other divs and such that can push the footer

.footer {
    position:absolute;
    bottom:0px;
    left: 0px;
    height:30px;
    width:100%;
    background-color:#171717;
    color:white;
}

Answer 3

Try something like;

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: #171717;
    color: white;
}

Here is a working Live Demo.