Vue Admin Template: full-height (non-scrollable) view?

I’m working off of the CoreUI Vue Admin Template. The general arrangement of components etc is: Hideable sidebar to the left, header on top, and then a scrollable view that takes up most of the page. The template this all derives from is TheContainer.vue, which looks like this:

  <div class="c-app" :class="{ 'c-dark-theme': $store.state.darkMode }">
      <div class="c-body">
        <main class="c-main">
          <CContainer fluid>
            <transition name="fade">

What I want to do is have a map view (I’m using Leaflet) which fills up the unused space on the page. Right now all I can figure out how to do is give the map a fixed height, using this code:

      <CIcon name="cil-map"/>
      Leaflet Map
      <div class="h-100">
        <div class="map-container" ref="mapContainer" style="height: 400px"></div>
      Legend goes here

What I want is for the map element to grow with the height of the window, as in the bottom image here:

…so the footer is always at the bottom of the viewport, and the map expands to fill the space. Is there a simple way to do this?


As a quick and dirty workaround you can add sth like

<style scoped> .c-map-container-height { height: calc(100vh - 300px); min-height: 400px; } </style>


<div class="map-container c-map-container-height" ref="mapContainer"></div>