如何使用 TailwindCSS 填充剩余的屏幕高度

Question

我正在使用带有 Tailwind 的 Vue 并想创建一个“NotFound”视图页面。此路由器视图上的内容应位于屏幕的中央。路由器视图上方是导航栏组件，因此在居中时我必须注意高度。

首先，我尝试使用h-screen路由器视图

<link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet"/>
<div>
  <div class="bg-yellow-400 py-8">
    my navbar
  </div>
  <div class="bg-green-400 flex justify-center items-center h-screen">
    this content is not centered on screen
  </div>
</div>

但是正如您所看到的，绿色容器中的内容不在屏幕中央。接下来我尝试与h-full

<link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet" />
<div class="h-screen">
  <div class="bg-yellow-400 py-8">
    my navbar
  </div>
  <div class="bg-green-400 flex justify-center items-center h-full">
    this content is not centered on screen
  </div>
</div>

但不幸的是，这仍然不能解决它。有人知道如何正确填充屏幕高度的其余部分，以便路由器视图的高度为100% - navbarComponentHeight？

Answer 1

使用 flexbox 如下：

<link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col h-screen">
  <div class="bg-yellow-400 py-8">
    my navbar
  </div>
  <div class="bg-green-400 flex justify-center items-center flex-grow">
    this content is not centered on screen
  </div>
</div>