Force footer to bottom of screen

I have a site (actually numerous) where I want the footer to be at the bottom of the screen. www.ckdev.info/sedona is the current one.

The footer wrapper has a 50% #000000 color applied to it. I made 2 copyright module positions - one for desktop, one for mobile devices and assigned them in responsive. I searched the net (try not to bug you with every query!!) and found some code so added this to the module in the wrapper:

position: absolute;
bottom: 0;
left: 0;
right: 0;

Pushed it to the bottom, but deleted the color in the footer on desktop. I did not add to mobile as it will always bee at the bottom. Displays fine on mobile. So I added the code to the wrapper instead of the module position. This time the desktop was fine, but the mobile, not surprisingly, shows the footer at the bottom of the screen and stays in that position on the page.

It's kind of like the opposite of the sticky header but not quite. What am I doing wrong Ced?

Thanks.

EDIT: Actually, just found that this doesn't work, period. It fails on desktop if the page is longer than the screen too - just like on mobile. This may be a great widget to add. I would use it all the time.

Hi
remove your position absolute, this is not the solution
Try something like this in the paremeters >> custom css

CEd

PS : you can adapt the 100px value to get the best result

Thanks Ced. Changed the 100px to 10px and it looks great.

Thanks again!!