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

Question

我将 Vue 与 Tailwind 结合使用，并想创建一个“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>

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

How to fill up the rest of the screen height using TailwindCSS

html

css

tailwind-css