title: Bootstrap 4: Fitting a Header & Footer + Google maps with 100% Height
body: <p>I'm trying to create a webppage using Boostrap 4.1 that contains a header, a Google map filling 100% of the content and a footer underneath the map.</p>
  
  <pre><code>---------------------------------------------------------------------
  |                             Header                                |
  ---------------------------------------------------------------------
  |                             Content                               |
  |                              (map)                                |
  |                                                                   |
  |                                                                   |
  |                                                                   |
  |                                                                   |
  ---------------------------------------------------------------------
  |                             Footer                                |
  ---------------------------------------------------------------------
  </code></pre>
  
  <p>Currently i am having alot of trouble fitting everything on the screen. It keeps adding a scrollbar because the footer falls off the page. Is there a way to fit the map on the screen so it fills the space between the header &amp; footer?</p>
  
  <pre><code>html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  
  #map-canvas {
    width: 100%;
    height: 100%;
  }
  </code></pre>
  
  <p>Here is my current progress in a jsfiddle : <a href="https://jsfiddle.net/11n0n6u1/1/" rel="nofollow noreferrer">https://jsfiddle.net/11n0n6u1/1/</a></p>