Having trouble getting the leaflet map to take up the full screen. I'm aiming for a header bar and the map filling the rest of the space. I've experimented with different options such as setting the height to 100%. Any suggestions or ideas? Thank you.
var map = L.map('map').setView([51.455, -0.973], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
#map {
height: 100%;
}