尝试在带有 Divi 主题的 Wordpress 站点中创建 100% 高度的 div

Question

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

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

我尝试过不同的事情：

height: 100% - 根本不显示任何东西，显然是父元素的问题
height: 100vh - 比屏幕大得多并触发滚动条
height: 74vh - 适合我的height: 74vh屏幕但不适合其他人
根据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 游戏很弱，我需要一些帮助！ 我陷入了一个不成功的试错循环中，并且想不出还有什么可以尝试的。

Answer 1

使用绝对位置并给它一个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>

尝试在带有 Divi 主题的 Wordpress 站点中创建 100% 高度的 div

问题描述

1 个解决方案

解决方案1
0 2020-10-16 21:17:22

尝试在带有 Divi 主题的 Wordpress 站点中创建 100% 高度的 div

问题描述

1 个解决方案

解决方案1 0 2020-10-16 21:17:22

解决方案1
0 2020-10-16 21:17:22