Question

我有这个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>

反应HTML和根高度设置以适合屏幕？

0 个答案: