Bottom sticky main-navigation in twenty twelve

Greetings,
A client is requesting a certain layout and styles, for which I’ve created a child theme. One of the features is placement of the main-navigation (navigation bar) to be sticky at the bottom of the browser window, and for the background to extend fully (100%).

I have encountered two problems: In the first approach I used, it’s not totally responsive – the main-navigation appears in the middle of the content in an ipad (horizontal). In the second approach, I can’t figure out how to get the background color to extend 100% and the div still behaves strangely (partially hidden by the bottom browser chrome).

Here is a link to the styles (I’ve commented them)
https://pastebin.com/KZui0BSS

Here is a link to the site under development:
https://lylegomes.net/wp/resume/

Here is a link to the current site, to illustrate what the client is after: https://www.lylegomes.net/portfolios/portfolio_set.htm

I’ve spent hours on this and will greatly appreciate any assistance.