white-space: nowrap 在 Google Chrome 移动设备的底部生成额外的空白空间答案

【问题标题】：white-space: nowrap generating extra empty space at the bottom on Google Chrome mobilewhite-space: nowrap 在 Google Chrome 移动设备的底部生成额外的空白空间
【发布时间】：2021-07-18 11:58:11
【问题描述】：

当应用white-space: nowrap 时，在 Google Chrome 移动版上，它会在页面底部生成一些额外的空白区域，从而导致垂直滚动到空白区域。

例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores magnam
      voluptatum eum laborum quo nihil distinctio hic nulla, libero aliquam
      consequatur. Architecto quod doloremque nostrum, vel perspiciatis ipsam
      quia at.
    </p>
  </body>
</html>

在移动设备上使用谷歌浏览器查看页面时，或使用谷歌浏览器的开发工具时，它会在页面底部产生一些额外的空白区域。我曾尝试将height 和min-height 应用于正文，但无论我使用什么值，底部的空格都会持续存在，例如：

body {
  height: 100%;
}

这是在 Google Chrome 开发工具上记录的问题的 gif 图像：

我在 Firefox 上进行检查，它不会产生额外的空白空间。在 Google Chrome 桌面上，底部不会产生额外的空白空间。

任何想法可能是什么问题以及如何解决它？

【问题讨论】：

好像是100%的宽度？

标签： html css google-chrome mobile

【解决方案1】：

看起来这是 chrome 仿真中的错误。如果您缩小窗口（而不是模拟），它不会垂直滚动。我也不会在我的 Android 上垂直滚动。

如果您想要更准确地模拟其他设备，www.browserstack.com 是一个非常好的解决方案。我与该网站或任何支持它的公司没有任何关系。

【讨论】：

谢谢！我在两台 Android 设备上进行了测试，都得到了垂直滚动，很确定这是谷歌 Chrome 移动问题而不是模拟器问题。我使用此页面mauriciorobayo.com/nowrap 和其他一些具有类似结果的页面进行了测试。无论如何，会接受你的回答，因为似乎没有解决方法，我同意你的观点，很可能这是一个错误。你所描述的正是我在测试中得到的行为，并且已经报告了这个问题，尽管在我的测试中它扩展到了 Android 设备。