浏览器覆盖遮挡了页面底部

Question

我正在尝试一个由页眉、内容和页脚组成的布局。页眉和页脚应该始终显示，内容应该展开以填充任何剩余的空间。我已经在这个jsfiddle中实现了这个功能。https:/jsfiddle.netSuperMe79204wd5sv42

.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;
}

在jsfiddle中，你可以看到浏览器覆盖遮挡了底部的页脚。我在手机上也有类似的问题，浏览器导航控件遮挡了页脚。

我可以进一步向下滚动，但这是一个糟糕的用户体验。

我希望页眉、页脚始终可见。我可以将高度设置为小于100vh，但这并不理想，因为这是一个虚构的，而且在没有覆盖的浏览器上，如我的桌面上，页脚并不长在视图的底部。

有什么想法可以解决这个问题吗？

这个问题和这些问题类似，但是我用了不同的定位方式，还没有得到解答。

1. 安卓浏览器底部控制栏叠加内容
2. Chrome `position:fixed; bottom: 0;`被安卓系统的用户界面遮挡住了

Answer 1

试试 height: 100% 而不是 height: 100vh. 你可能还需要给每个容器分配100%的高度。

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

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

我有两个 #app 和 .app 因为你的JSFiddle例子有这两个。

Answer 2

在style.css的顶部添加以下内容。

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

样品在此链接中 https:/codepen.ioLakshithaMadushanpenBaoxvNv。