JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css">
<!DOCTYPE html>
<body>
    <div id="header"></div>
    <div id="map"></div>
    
    <div id="otherstuff">xxx</div>
</body>

CSS

#map { position: fixed; z-index: -1; width: 100%; }
#header { height: 40px; background: black; }
#otherstuff { position: fixed; bottom: 0px; width: 100%; background-color: rgba(255,255,255,0.6); height: 30%; }

JavaScript

var map = L.map('map', { center: [51.505, -0.09], zoom: 13 });
osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {});
map.addLayer(osm);

function initMap() {
  $('#map').css({"height": $(window).height() + "px"});
  map.setView(map.getCenter(),map.getZoom());
}

var id;
$(window).resize(function() {
  clearTimeout(id);

  id = setTimeout(initMap, 500);
});

$('#map').css({"height": $(window).height() + "px"});
  map.setView(map.getCenter(),map.getZoom());