Our latest project is designed specifically for mobile use.
The fixed navigation bar is functioning perfectly.
We also have a fixed footer with icons at the bottom. (All working well)
The challenge we are facing is to make the content between the navigation and footer divs fill the height automatically, without the need for scrolling.
As the device's height changes, the content should adjust accordingly.
Currently, when the device height changes, it leaves a blank space at the bottom.
We have tried adjusting min-height, max-height, positions, and other CSS properties, but so far, no luck.
It's difficult to share the code here as we are using multiple libraries and a lot of custom CSS, including Bootstrap styles.
If you'd like to test the project, you can access it here:
Below is an excerpt from the menu:
-- Menu Code Goes Here -- Here is the main page content located between the navigation and footer divs:
-- Main Content Code Goes Here --And here is the footer section:
-- Footer Code Goes Here --Here are some relevant CSS styles that may be impacting the layout:
-- Relevant CSS Styles Go Here --