Browser overlay obscuring bottom of page

user_12691754 0
Viewed 442

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.

top

I can scroll down further but that is a bad user experience.

bottom

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.

  1. Android browser bottom control bar overlays content
  2. Chrome `position:fixed; bottom: 0;` obscured by Android UI
flexbox android browser css html
2 Answers

Try height: 100% instead of height: 100vh. You'll probably also need to assign 100% height to every container:

/* full height for every wrapping element and the app itself */
body,
html,
#app,
.app
{
  height: 100%;
}

.app {
  display: flex;
  flex-direction: column;
}

I've got both #app and .app there because your JSFiddle example has both.

user_4658870
user_101755470
Related