I am attempting a layout consisting of header, content and footer. The header and footer should always be shown and the content should expand to fill any space remaining. I have implemented this in this jsfiddle; https://jsfiddle.net/SuperMe79/204wd5sv/42/
.app { display: flex; height: 100vh; flex-direction: column; flex-wrap: nowrap; background-color: lightyellow;}.header { flex-shrink: 0; background-color: lightsalmon;}.content { flex-grow: 1; /* this adds a scrollbar when the content takes up more space than available to display */ overflow: auto; background-color: lightgreen;}.footer { flex-shrink: 0; background-color: lightblue;}In the jsfiddle you can see a browser overlay obscures the footer at the bottom. I have a similar problem on my phone where the browser navigation controls obscure the footer.
I can scroll down further but that is a bad user experience.
I want the header, footer to always be visible. I can set the height to less than 100vh but this isn't ideally as it's a fudge and the footer is not longer at the bottom of the view on a browser without an overlay such as on my desktop.
Any thoughts on how to resolve this?
This is a similar issue to these questions but I've used a different approach to positioning and they haven't been answered.