Main vertical height and Footer overlap

Hi Support,

I am working on a project where I am including a Mapbox map on the page. Firstly, there were some creative hacks to include the map on the page relative to using the MDBootstrap top nav bar, which looks fine except that the page does not scroll behind or "under" the nav. The nav is sticky at top.

Of particular concern is the "length" of the <main> section content on the page which gets overlapped with a kind of floating footer section towards page bottom. This is visible on smaller viewports for devices like smartphones and tablets.

Here's the page (test): http://gridinteractive.com/mg/contact.htm

Responsive testing with Screenfly:

http://quirktools.com/screenfly/#u=http%3A//gridinteractive.com/mg/contact.htm&w=375&h=667&a=37&s=1

I would like to be able to get the footer fixed at page bottom below the map directions content. As a plus, it would be nice to close the issue with the top nav and page scrolling, too.

Thank you!

Eric

Seattle, Washington