在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

Answer 3

h-[600px]-可以设置为px格式。