4

在 IOS Chrome 上，body 在没有内容的新选项卡或页面上溢出，但如果重新加载页面，问题就解决了。对于位于底部的任何元素（绝对或固定），它都会造成问题。这是重现问题的代码：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=2, initial-scale=1">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <style>* {
         box-sizing: border-box;
         }
         html{
          height:100%;
         }
         body {
          height:100%;
          background-color:yellow;
          margin:0 0;
          border: 30px solid red;
         }
      </style>
   </head>
   <body></body>
</html>

边框应显示在视口周围，但隐藏在底部导航栏后面。这是上面代码的结果：

移动 chrome 上的新页面/标签

页面重新加载后

我尝试过的事情（没有一个有效）：

我已经尝试了一周寻找解决方法，但无济于事。任何帮助将不胜感激

编辑：我的问题不同于在移动设备上没有填充完整宽度的 HTML 正文，因为我没有填充正文的问题，我有一个溢出的正文问题，并且移动 chrome 在新页面上的行为与现有页面不同. 页面上的解决方法不适用于我的问题

我的问题如下：当使用上面的代码打开一个新页面时，有人能找到一种使用 css 或 JS 使 HTML 正文不溢出的方法吗？

4

4 回答 4

3

我已经重现了您的问题，并且可能已经找到了解决方案。我发现这个我认为会导致你的问题：

[...] 核心问题是移动浏览器（我在看你，Chrome 和 Safari）有一个“有用的”功能，地址栏有时可见有时隐藏，从而改变视口的可见大小。这些浏览器没有将 100vh 的高度调整为随着视口高度的变化而成为屏幕的可见部分，而是将 100vh 设置为地址栏隐藏的浏览器的高度。结果是当地址栏可见时屏幕的底部将被切断，从而违背了 100vh 开始的目的。

文章建议

解决此问题的一种方法是依赖 javascript 而不是 css。当页面加载时，将高度设置为 window.innerHeight 将正确地将高度设置为窗口的可见部分。如果地址栏可见，则 window.innerHeight 将是全屏的高度。如果地址栏是隐藏的，那么 window.innerHeight 将是屏幕可见部分的高度，正如您所期望的那样。

在评论中，他们建议将内部高度存储在 CSS 变量中，每次事件resize或被orientationchange触发时刷新它并将其应用于 html 和 body 标签。在我的测试中，它只部分起作用。从链接访问页面target="_blank"工作正常，但刷新或直接访问页面会显示您在通过链接访问页面时描述的问题。为了解决这个问题，我还在load活动期间更新了变量。在我的 iPhone 6s 和最新的 Chrome 应用程序上，通过链接或直接访问页面现在似乎工作正常。我希望这是您正在寻找的：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=2, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <style>
      * {
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
      }

      body {
        background-color: yellow;
        margin: 0 0;
        border: 30px solid red;
      }
    </style>
  </head>

  <body></body>

  <script>
    function fixHeight() {
      document.documentElement.style.setProperty('--vh', `${window.innerHeight / 100}px`);
    };

    addEventListener('load', fixHeight);
    addEventListener('resize', fixHeight);
    addEventListener('orientationchange', fixHeight);
  </script>

</html>
于 2020-12-20T17:00:46.947 回答
1

WebKit 处理 100% 高度有点奇怪，您需要为 WebKit 设备使用供应商前缀属性：

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

资源

于 2020-12-17T21:58:17.407 回答
0

这是同一个问题的重复，问题是相同的，只是询问方法不同。

这是先前提出的相同问题，并且正确答案中的详细信息也得到了很好的解释。

CSS3 100vh 在移动浏览器中不恒定

这将帮助您了解您面临的问题。

于 2020-12-19T08:03:31.910 回答
0

我找到了一个关于绝对定位的解决方案 - 在 iOS 上的 Chrome 中，它似乎window.innerHeight以全屏高度初始化，然后在不久之后（大约 100 毫秒左右）切换到地址栏和底部工具栏之间的高度。在我的情况下是667px和553px分别。

如果您以编程方式将 传递window.innerHeight到应用程序父元素的高度以使应用程序的高度与内部高度相同，并提供顶部元素position: relative;，则该元素的所有具有样式的子元素都position: absolute;将具有相对位置到这个父元素，而不是网页。

它没有解决内容下方有多余高度的问题，但它解决了绝对定位。

HTH。

于 2021-03-04T12:40:02.653 回答