CSS Responsive Footer

The majority of the site displays well in all browsers including mobile except for the footer.

In 1600X900 dimensions the footer displays perfectly. On sites where the resolution height is below 900, the footer disappears. I've tried everything I could think of to have the footer "snap" to the bottom of the screen and am clearly out of my realm of expertise. Tested using the latest Chrome and Firefox with similar/same results (that is good I guess, LOL).

How do I have the bottom black elements snap to the bottom of the page?

URL of website: http://bit.ly/1ro8FtA

Screenshot at different dimensions: http://bit.ly/1uLGgNX

Solution

If I understand correctly (if you only want to move your Footer and not the all black region), try to change your CSS:

.agentpress-pro-black .site-footer {
    background-color: #000000;
    font-size: 16px;
    padding: 40px 0;
    text-align: center;
}

to this:

.agentpress-pro-black .site-footer {
    background-color: #000000;       
    font-size: 16px;
    padding: 40px 0;
    text-align: center;
    width: 100%; /*new*/
    bottom: 0; /*new*/
    position: fixed; /*new*/
}

NOTE

If you want all black region, then you should change your HTML, and move all your black region in order to have one positioning container fixed