Currently the footer will hover in the middle of the page if the page doesn't fill the screen.
This change will formats the App as a CSS grid, set to fill the display viewport.
The header and footer rows are set to "auto" height, so will take minimum required space. The content row is set to 1fr (fractional unit), which will cause it to expand to fill available space.
If the page is taller than the screen, it will scroll normally.
As part of this, I've moved the navigation into the header.
Currently the footer will hover in the middle of the page if the page doesn't fill the screen.
This change will formats the App as a CSS grid, set to fill the display viewport.
The header and footer rows are set to "auto" height, so will take minimum required space. The content row is set to
1fr(fractional unit), which will cause it to expand to fill available space.If the page is taller than the screen, it will scroll normally.
As part of this, I've moved the navigation into the header.