Background CSS DIV background not stretching on mobile - html

Question

When viewing my client's site on a smartphone (https://50965.thankyou4caring.org/), the white background div doesn't stretch down the full length of the page.
Even when viewing the page in Google Chrome's inspect tool emulating a smartphone, I see the same problems.
The Div IDs in question are wrapContentOuter and wrapContentInner
I've read that using the following code should work:
body, html{
height:100%;
}
However, after testing it out in several of the stylesheets linked to the page, I've been unable to find which stylesheet to apply this code to and make it work. I've removed all tests and the CSS remains as it was when I started this job.
Am I missing something? Any advice or help is greatly appreciated! Thanks in advance, and please let me know if I'm missing any details.

Answer 1

Try this kind of code : http://jsfiddle.net/nyitsol/8abj8sLL/
The footer will always go down.
I can see you are using a min-height for the #contentPrimary which you don't need.
#contentPrimary {
float: right;
width: 650px;
margin: 0;
min-height: 400px;
}
The min-height should be 100%
EDIT:
Try this code now, just replace the class with this css.
#wrapFooter .gutter {
padding: 0;
width: 980px;
margin: 0 auto;
}
/*sticky footer*/
#wrapFooter {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
/*No Background Color Need*/
#BodyId, #internal {
/* background-color: #7B7670!important; */
}