I have a Wordpress site, that shows maps of fictional worlds. The maps are leaflet.js maps, that are displayed within a div called map. This div is not created with the divi frontend, but in a html file that gets included through a plugin shortcode. Basically the php plugin loads a bunch of map specific settings to provide to the leaflet map and shows some html.
Now I want this map div to be as high as possible without causing a scrollbar.
I've tried different things:
height: 100%- does not show anything at all, apperantly an issue with the parent elementsheight: 100vh- way bigger than the screen and triggers a scrollbarheight: 74vh- fits on my 2.5k screen but not on others- setting height according to
window.innerHeightis too large - setting height according to
window.innerHeightand substracting the pixel count of the header and footer is too large too
Whatever I try, I either get a scrollbar or a white stripe below my blue footer. You can see it live here: https://fictionalmaps.com/audience-map/?creator=1&map=KisandraShowCase
My latest - not working - iteration of the code I include with php looks like this:
<!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>
This produces a scrollbar. If I try e.g. var tempHeight = window.innerHeight - 340; I can get it to fit nearly, but get a white stripe below the footer. Also it's not consistent across computers.
My CSS game is weak, I need some help! I'm stuck in an unsuccessful trial-and-error loop and running out of ideas what else to try.
Use position absolute and give it a
top: 0;andbottom: 0;that way iot will use the entire screen height.