I am attempting to embed a Leaflet map within a standard Sails.js view. Sails.js automatically includes a page header on every page. Currently, with a fixed height, the map appears like this:
#mapid {
height: 400px;
}
https://i.sstatic.net/pzOdql.jpg
This setup is not ideal as we need the height to adjust based on the screen size. When using absolute positioning, the map covers the entire screen and obscures the top bar.
#mapid {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
Is there a way to ensure that the map fills the screen while still displaying the top bar? I have attempted changing the position to relative, but that causes the map to disappear.