Как в Tailwind установить высоту div до 80% экрана?

Question

У меня есть переполнение div в yоси и хотите, чтобы она составляла ровно 80% высоты экрана. Теперь у меня есть это <div class="overflow-y-auto h-96"> который работает, но высота должна быть больше 96, ровно 80% всего экрана (чтобы оставалось место для верхнего и нижнего колонтитула).

С использованием h-4/5 похоже не работает.

          <div class="h-4/5 bg-yellow-200 overflow-hidden">
        <div class="overflow-y-auto bg-yellow-500 space-y-3">
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            </div>
        </div>
    </div>

Обновление: у меня есть это (также доступно здесь https://play.tailwindcss.com/NlZdzWfkyD), но если я раскомментирую верхнюю панель, это не сработает, пожалуйста, есть идеи?

      <div class="h-screen">
  <div class="h-full">
    <!--<div class="bg-blue-400 py-3">topbar</div>-->

    <div class="pl-6 pr-16 pt-12 h-full">
      <div class="h-full border border-gray-200 rounded-t-xl px-20 pt-3 flex flex-col">
        <div class="h-1/2 bg-red-100"></div>
        <div class="h-1/2">
          <div class="flex flex-col h-full">
            <div class="bg-yellow-200 overflow-hidden">
              <div class="overflow-y-auto bg-blue-500 space-y-3 h-full">
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
              </div>
            </div>

            <div class="h-20"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Ты можешь сделать h-[80vh], что установит высоту на 80% от высоты экрана.

Answer 2

Протестировано с помощью Tailwindcss V3.3.3: вы можете сделатьh-[80%],h-[xx%]которые задают высоту илиw-[xx%]установите ширину элемента.

Также у нас естьh-3/6 <- height: 50%; h-x/x or w-3/6<-width: 50%; w-x/x