@ashley could you look into this please since you know what to do to find a fix.

Tricky little bug; this'll likely require plenty of testing on a wide variety of devices (desktop and mobile alike).

Right now #content's height is auto, which seems to be causing this issue. Setting the height to a percentage of some kind fixes the issue...except the fix seems to be screen-resolution-dependent (sigh). I played around a bit in Firefox (v. 41.0.1 under Windows 7) with the Responsive Design emulator and here are some results:

• 1440×900px — #content { height: 91%; }
• 320×480px — #content { height: 85%; } (higher percentages will cause the "powered by MediaWiki" button to be placed outside of the viewport)
• 360×640px — #content { height: 87%; }
• 768×1024px — #content { height: 92%; }
• 980×1280px — #content { height: 94%; }

Hacky, huh? You bet...

Alternatively #content could be given position: absolute, but I think that might reintroduce the ToC bug?

Thankyou for taking a look at this.

Yes position: absolute would introduce the bug currently I changed it to position: relative to fix the toc. I am not sure how to do it so that it will auto detect so that it shows it as white at the bottom.