Topic: Main vertical height and Footer overlap

surface2air free asked 5 years ago

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):

Responsive testing with Screenfly:

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!


Seattle, Washington


The problem is with your custom code. Please try to remove this part of code so it should work fine:

.tab-content {
  height: 760px;

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: Smaller Viewports
  • Browser: All
  • OS: iOS & Android
  • Provided sample code: No
  • Provided link: No