0

我有一个 Wordpress 网站，显示虚构世界的地图。这些地图是 Leaflet.js 地图，显示在一个名为map. 此 div 不是使用 divi 前端创建的，而是在通过插件短代码包含的 html 文件中创建的。基本上，php 插件会加载一堆地图特定设置以提供给传单地图并显示一些 html。

现在我希望这个地图 div 尽可能高而不会导致滚动条。

我尝试了不同的东西：

  • height: 100%- 根本不显示任何东西，显然是父元素的问题
  • height: 100vh- 比屏幕大并触发滚动条
  • height: 74vh- 适合我的 2.5k 屏幕，但不适合其他人
  • 设置高度根据window.innerHeight太大
  • 根据window.innerHeight并减去页眉和页脚的像素数设置高度太大

无论我尝试什么，我的蓝色页脚下方都会出现滚动条或白色条纹。你可以在这里看到它：https ://fictionalmaps.com/audience-map/?creator=1&map=KisandraShowCase

我在 php 中包含的代码的最新 - 不工作 - 迭代如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Map</title>
    <meta charset="utf-8" />
    <!-- meta name="viewport" content="width=device-width, initial-scale=1.0" -->
    
    <!-- some css files are loaded here needed for the leaflet map itself - none should interfere with the map div -->

    <style>
        html, body {
            padding: 0;
            margin: 0;
        }
        #map {
            width: 100%;
            max-width: 1024px;
            height: 70vh;
            max-height: 1024px;
        }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
        var tempHeight = window.innerHeight;
        jQuery('#map').height(tempHeight);
    </script>

    <!-- some js files are loaded here needed for the leaflet map itself -->

</body>
</html>

这会产生一个滚动条。如果我尝试，例如var tempHeight = window.innerHeight - 340;，我可以让它几乎适合，但在页脚下方有一条白色条纹。此外，它在计算机之间也不一致。

我的 CSS 游戏很弱，我需要一些帮助！我被困在一个不成功的试错循环中，并且没有什么可以尝试的想法。

4

1 回答 1

0

使用绝对位置并给它一个top: 0;，bottom: 0;这样 iot 将使用整个屏幕高度。

#fullscreen {
  background-color: blue;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<body>
  <div id="fullscreen"></div>
</body>

于 2020-10-16T21:17:22.277 回答