Browser overlay obscuring bottom of page

Question

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.

Can you see if this works? https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser — Dhruvil21_04, May 10 '20 at 18:27
Thanks Dhruvil21_04. The link does describe the problem and suggests a solution that works; changing height from 100vh to -webkit-fill-available. I haven’t gone for this option because Dave Ceddia’s solution seems like it would be more universally supported. — SuperMe, May 11 '20 at 00:24

score 3 · Accepted Answer · answered May 10 '20 at 23:58

3

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.

answered May 10 '20 at 23:58

Dave Ceddia

1,480
2
17
24

Thanks Dave. This worked for me on Android and on my desktop. Curiously it didn’t work in jsfiddle; I suspect due to nesting but I’m not going to investigate. – SuperMe May 11 '20 at 00:20

score 0 · Answer 2 · answered May 10 '20 at 22:22

0

Add followings top of the style.css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Sample is in this link https://codepen.io/LakshithaMadushan/pen/BaoxvNv

answered May 10 '20 at 22:22

lakshitha madushan

669
4
7

Thank you for attempting to solve my problem. Unfortunately the addition you suggested doesn’t make any difference. The problem isn’t observable in Codepen as there is no browser overlay. You can see it in jsfiddle or when using Chrome on Android. Unfortunately the later is what a large proportion of users of my app will be using. – SuperMe May 10 '20 at 23:13

Browser overlay obscuring bottom of page

2 Answers2