React Tailwind Dynamic Div Высота не обновляет расчет поста

У меня есть экран с двумя элементами div: верхняя панель навигации (высота 80 пикселей) и компонент div под панелью навигации (оставшаяся высота экрана).

Поскольку я использую форматирование попутного ветра, это выглядит примерно так:

<div className = "w-screen h-[80px]"> //navbar
</div>
<div className = "w-screen h-screen"> //bottom content div
</div>

Проблема: панель навигации имеет размер 80 пикселей, а нижний контент динамический, но внизу появляется белый пробел. Белый зазор исчезнет при использовании h-экрана (100% vw).

Из-за высоты панели навигации 80 пикселей я должен динамически вычитать нижний div (h-screen-80px), иначе появится вертикальная полоса прокрутки, которую я не хочу. Итак, у меня есть слушатель для обновления высоты окна в зависимости от текущего размера окна (включая события изменения размера окна). Затем я вычитаю эту высоту на 80, составляю строку для попутного ветра и обновляю className. Хотя он работает нормально, и инспектор показывает, что он динамически обновляет высоту div, визуально она не регулируется должным образом.

Новая попытка с прослушивателем событий окна и вычислением. Обратите внимание, что вычисленный heightMinusNavbar корректно обновляется при изменении размера окна, но визуально не

import React from "react";
import Gallery from "../components/gallery/Gallery";
import Navbar from "../components/navbars/Dapp";

class dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = { width: 0, height: 0 };
    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
  }

  componentDidMount() {
    this.updateWindowDimensions();
    window.addEventListener("resize", this.updateWindowDimensions);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updateWindowDimensions);
  }

  updateWindowDimensions() {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  }

  // todo: change height to be full screen subtracted by nav height

  render() {
    const heightMinusNavbar = `h-[${(this.state.height - 80).toString()}px]`;
    console.info("heightMinusNavbar " + heightMinusNavbar);

    return (
      <>
        <Navbar />
        <div
          className = {`w-screen text-gray-300 y-full bg-gray-900 ${heightMinusNavbar}`}
        >
          <Gallery />
        </div>
      </>
    );
  }
}

export default dashboard;

Что я делаю неправильно?