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:

<template>
  <div class="c-app" :class="{ 'c-dark-theme': $store.state.darkMode }">
    <TheSidebar/>
    <TheAside/>
    <CWrapper>
      <TheHeader/>
      <div class="c-body">
        <main class="c-main">
          <CContainer fluid>
            <transition name="fade">
              <router-view></router-view>
            </transition>
          </CContainer>
        </main>
        <TheFooter/>
      </div>
    </CWrapper>
  </div>
</template>

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:

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

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?

Thanks!

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>

and

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