在移动设备上放大时如何删除页面下的空白答案

【问题标题】：How to remove the white space under my page when zooming in on mobile在移动设备上放大时如何删除页面下的空白
【发布时间】：2019-11-22 04:29:34
【问题描述】：

我正在开发一个响应式网站，一切正常，除了当我在移动设备上捏放大并向下滚动时，我的整个页面下方有一个大白条，延伸到我的整个屏幕宽度。我该如何摆脱这个？这是我的页脚代码：

    <footer id="footer">
    <img id="footer-logo" src="imgs/logo.png" alt="White-Tails Icon">
    <h4 style="vertical-align:bottom;">Copyright © West Shore White-Tails 2019</h4>
    <h3 id="check-out-sm">Check out our Social Media!</h3>
    <div class="tooltip">
      <span class="tooltiptext">Visit Facebook</span>
      <a target="_blank" href="https://twitter.com/ClubWscc"><img src="imgs/fbIcon.png" alt="Twitter Icon"></a>
    </div>
    <div class="tooltip">
      <span class="tooltiptext">Visit Twitter</span>
      <a target="_blank" href="https://twitter.com/ClubWscc"><img src="imgs/twitterIcon.png" alt="Twitter Icon"></a>
    </div>
  </footer>

我的整个页面结构如下

<body>
<wrapper>
  <other crap>
</wrapper>

另外值得注意的是，滚动条并没有出现在这个白色区域...

编辑：继承人的相对 css

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  background-image: url("../imgs/bg.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow-x: hidden;
}
footer {
  width: 100%;
  height: 20%;
  background-color: #080808;
  text-align: center;
  bottom: 0;
  border-top: 1px solid white;
  position: static;
  padding-bottom: 40px;
}

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

它可以来自css。你可以为 body、html 和所有页脚元素添加你的 css 吗？此外，您可以将元素作为移动设备（在 chrome 浏览器中）进行检查，看看是什么创建了这个空间。

【讨论】：

它不显示在桌面浏览器中.. 最好的解释是它就像一个“双滚动”......就像你可以滚动前景（就像你应该的那样），但也可以滚动背景。即使它是固定的。使用一些 css 编辑操作
也添加了图片