浏览器覆盖遮挡页面底部答案

【问题标题】：Browser overlay obscuring bottom of page浏览器覆盖遮挡页面底部
【发布时间】：2020-05-11 07:58:42
【问题描述】：

我正在尝试由页眉、内容和页脚组成的布局。应始终显示页眉和页脚，并且内容应扩展以填充剩余空间。我已经在这个 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;
}

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

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

我希望页眉、页脚始终可见。我可以将高度设置为小于 100vh，但这并不理想，因为它是一个软糖，并且页脚不再位于浏览器视图的底部，而没有像我的桌面那样的覆盖。

关于如何解决这个问题的任何想法？

这是与这些问题类似的问题，但我使用了不同的定位方法，但尚未得到解答。

【问题讨论】：

你能看看这是否有效吗？ stackoverflow.com/questions/37112218/…
感谢 Dhruvil21_04。该链接确实描述了问题并提出了可行的解决方案；将高度从 100vh 更改为 -webkit-fill-available。我没有选择这个选项，因为 Dave Ceddia 的解决方案似乎会得到更普遍的支持。

标签： android html css browser flexbox

【解决方案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 示例两者都有。

【讨论】：

谢谢戴夫。这适用于我在 Android 和我的桌面上。奇怪的是，它在 jsfiddle 中不起作用；我怀疑是因为嵌套，但我不打算调查。

【解决方案2】：

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

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

样品在这个链接https://codepen.io/LakshithaMadushan/pen/BaoxvNv

【讨论】：

感谢您尝试解决我的问题。不幸的是，您建议的添加没有任何区别。由于没有浏览器覆盖，因此在 Codepen 中无法观察到该问题。您可以在 jsfiddle 或在 Android 上使用 Chrome 时看到它。不幸的是，后者是我应用的大部分用户将使用的。