在Tailwind中，如何设置div的高度为屏幕的80% ?

Question

我在y轴上有一个溢出div，并希望它正好是屏幕高度的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