手机和平板电脑浏览器底部的页脚背景颜色被切断

Question

页脚的背景颜色在移动浏览器视口的底部不断被截断。平板电脑也是如此，但仅当平板电脑水平转动时。我已经尝试了我在网上找到的一切和其他相关问题来解决这个问题。在我打我的笔记本电脑屏幕之前，有人有什么建议吗？您可以通过www.lamarplaterimages.com 查看该网站。我正在我的 iPhone 11 和 iPad Pro 上查看该网站。

这是默认的页脚 CSS

footer {
background-color: #133e68;
margin-bottom: 0;
padding-bottom: 0;
bottom: 0;
}

这是 375px 媒体查询的 CSS。

footer {
height: 100%;
}

这是我遇到的问题。文字还在。只是背景颜色被剪掉了。

非常感谢任何和所有帮助。

Answer 1

我不认为 100% 是正确的，当您使用宽度时，是的， 但是对于高度，这将永远无法正常工作，如果确实如此，它将占用所有屏幕 将高度设置为 100% 30% ... 或任何相关单位仅适用于具有固定高度的容器，例如将主体高度设置为 100vh 或 500px ...

footer {
 height: 100%;
}

尝试固定容器高度（例如：body），例如 px、vh。或使用非相对单位作为页脚，以检查您的代码是否 % 有任何影响，尝试 200% 3000% 或任何其他值，自 100% 或 50% 以来您不会观察到任何变化？