如何解决尝试在具有Divi主题的Wordpress网站中创建100%高的div
我有一个Wordpress网站,其中显示了虚构的世界地图。这些映射是leaflet.js映射,显示在名为map
的div中。这个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游戏很弱,我需要一些帮助!我陷入了一个失败的反复试验循环中,并且用尽了其他尝试方法。
解决方法
使用绝对位置,并为其设置top: 0;
和bottom: 0;
,以使物联网将使用整个屏幕高度。
#fullscreen {
background-color: blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<body>
<div id="fullscreen"></div>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。