How to combine grid-template-areas with a sticky position of the particular areas?

Question

I'm considering how to make navbar, sidebar, and footer sticky elements. But at the same time control their arrangement, width, and height by using the grid on the parent element.

I made great progress on that, but the only issue is: How to make the sidebar have 100% of the view height minus the footer height. The most difficult part: we don't know the footer height.

I have included more details as comments in the code. So, please check the demo.

Please uncomment the height of the aside tag to see the target result. But we need to find another way in which we don't know the footer height.

aside {
  /* height: calc(100vh - 55px); */
}

body {
  margin: 0;
}

main {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr auto;
  grid-template-areas:
    'sidebar navbar'
    'sidebar content'
    'footer footer';
}

nav {
  background: linear-gradient(#e66465, #9198e5);
  grid-area: navbar;
  position: sticky;
  z-index: 1;
  top: 0;
}

aside {
  background: linear-gradient(135deg, orange 60%, cyan);
  grid-area: sidebar;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  /* Uncomment the height to see the target result. The thing is the footer height won't be 55px. */
  /* I am looking for a solution in which the sidebar will automatically shrink by the footer size, but will still be sticky */
  
  /* height: calc(100vh - 55px); */
  
  /* Preferable way to fix the issue is NOT to style the `aside` element. */
  /* Rather change the `main` tag style if it is possible. `aside` does not have to know that there is a footer somewhere :) */
}

article {
  background: linear-gradient(45deg, red, blue);
  grid-area: content;
  padding-bottom: 1500px;
}

footer {
  background: linear-gradient(180deg, yellow, orange);
  grid-area: footer;
  position: sticky;
  bottom: 0;
  /* Ultimately, we don't know the height of the footer. */
  /* It will adjust automatically depending on the content. */
  height: 55px;
}

<main>
  <nav>I'm the sticky navbar</nav>
  <aside>
    <p>the sticky sidebar height should be 100% minus the unspecified footer height. and still be sticky to see sidebar, navbar, and footer all the time</p>
    <p>so, this text should be always visible just above the footer when scrolling</p>
  </aside>
  <article>I'm the STATIC content</article>
  <footer>I'm the sticky footer. <br />ultimately, we don't know the height of the footer. it will adjust automatically depending on the content / screen width</footer>
</main>

Maybe it cannot be done the way that I started. although I hope it can :pray: :pleading_face: