title: How can I make my Shiny leafletOutput have height="100%" while inside a navbarPage?
body: <p>(Long time user, first time poster)</p>
  
  <p>I'm working on a Shiny App that uses the Leaflet package. Without a navigation menu, I am able to make the LeafletOutput have 100% height by using <code>leafletOutput('map', height='100%')</code>.</p>
  
  <p>The problem is that when I place this code inside a navbarPage, it no longer works and my map stops displaying (console error below). I've tried injecting CSS code by adding <code>tags$style(type = "text/css", "#map {height: 100%};")</code> but that doesn't seem to have any effect. If I change this to <code>tags$style(type = "text/css", #map {height: 100% !important};")</code>, the code breaks again and I get the same error code in my console:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'clearLayers' of undefined
  Uncaught TypeError: Cannot read property 'addLayer' of undefined
  Uncaught TypeError: Cannot read property 'clear' of undefined
  Uncaught TypeError: Cannot read property 'add' of undefined
  </code></pre>
  
  <p>These errors are thrown on leaflet.js on lines 814, 726, 979 and 1095 respectively. The code for these lines is as follows: </p>
  
  <p>line 814: <code>this.layerManager.clearLayers("shape");</code><br>
  line 726: <code>this.layerManager.addLayer(layer, category, thisId, thisGroup);</code><br>
  line 979: <code>this.controls.clear();</code><br>
  line 1095: <code>this.controls.add(legend, options.layerId);</code></p>
  
  <p>Below is the relevant code from my UI.R file:</p>
  
  <pre><code>navbarPage("DHIS Data Explorer",
         tabPanel("Plot",
                  tags$style(type = "text/css", "html, body, #map {width:100%;height:100%}"),
                  leafletOutput('map', height = "100%"), #this height variable is what breaks the code.
                  absolutePanel(top = 60, right = 10, draggable=TRUE,...
  </code></pre>
  
  <p>And here is code I was using before adding navigation, which works fine:</p>
  
  <pre><code>bootstrapPage(
    tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
    leafletOutput("map", width = "100%", height = "100%"),
    absolutePanel(top = 60, right = 10, draggable=TRUE,...
  </code></pre>