0

我有这个 index.html css。因此，在 Chrome 中，网站没有滚动条，它适合屏幕。然而，在 Safari 和 Firefox 上，我在底部有一个很小的间隙，可以创建一个滚动条。当我检查网络检查器时，它是 100vh。而且，即使我改成100%，它的底部仍然有一个微小的差距。有什么解决办法吗？另外，我怎样才能使它适应移动环境？我听说这是故意的，但有些人设法通过使用 -webkit-fill-available 来适应屏幕。但是，它不适用于我的情况

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 50000s ease-in-out 0s,
    color 50000s ease-in-out 0s;
  transition-delay: background-color 50000s, color 50000s;
}

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  max-width: 100%;
  position: relative;
  /* max-height: 100%; */
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
}

#map_canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}

#root {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

我的 index.html 文件是这个

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />

    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />

    <script>
      google = window.google;
    </script>
  

    <title>Sportties</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
4

0 回答 0