Hello,
Did a build for web on the app we are developing. I need to include a global HTML header/footer around the application itself. I can’t for the life of me figure out how to get it to fill the space with an automatic height. It starts at 0, and will only show if I can set the height of it’s parent container.
Looking to either:
Find a way to make the web build have a natural height, and not assume it’s positioned absolute in the entire window.
Or
Write a script to measure the height and adjust it’s parent container accordingly.
Any help is greatly appreciated.
Thank you,
Clint
Global footer/headers are not something that you should be attempting honestly.
We’ve had them in Ionic’s past, but have cause more issues.
You should just be including them in each page
When you say “around the application itself”, do you mean around the DOM element that is the root of the application? Also, do the header and footer need to interact with the app (or vice versa), or are they just boilerplate stuff your company (or client) requires, independent of the web app’s own functionality?
If the header and footer are independent of the app, then flexbox is your friend. Try some of these results from Google: https://www.google.com/search?q=full+page+header+footer+flexbox
If the header and/or footer need to interact with (i.e., know the state of) your app then follow @mhartington’s advice and include the header and footer on each of your app’s pages (in that case I’d recommend creating components for them).
The solution we went with was a fixed header, since it didn’t need to effect the applications space.
Then for the footer, we ended up including/building it into the app. Thank you for the help.