Footer Sticky Bottom Scroll & Page

I added the following using the Customizing Additional CSS.

My first goal is to keep the footer sticking to the end of the scroll on pages where the content is greater than the screen height. My second goal is to keep the footer sticking to the bottom of the screen on pages where the content is shorter than the screen height.

The attempt below is successful for the first goal but not the second?

What am I missing to keep the footer sticking to the bottom of the screen on pages where the content is shorter than the screen height as well?

Thanks.

}

.site-footer {
position:absolute;
padding: 0px 0px 0px 0px;
bottom:;
width:100%;
height:50px;
overflow: hidden;
background:#6cf;
}

The page I need help with: [log in to see the link]