Tailwind三段式和滚动条

最近做angular项目，用tailwindcss写样式，遇到一个三段式布局的问题，记录一下。
使用grid和fixed flex进行三段式布局的尝试，tailwindcss写起来更简单。
有一个地方需要注意，grid写完外部容器还是有滚动条的，需要手动去掉。
fixed flex写完外部容器却没有滚动条。

• grid

<div class="h-dvh grid grid-rows-[auto_1fr_auto]">
  <header class="h-16 bg-gray-200">
  <main class="overflow-y-auto min-h-0">
    <div class="h-full">
      <h1>Main Content</h1>
    </div>
  </main>
  <footer class="h-16 bg-gray-200">
    <p>Footer</p>
  </footer
</div>

• fixed flex

<div class="h-dvh flex flex-col">
  <header class="h-16 bg-gray-200">
  <main class="fixed top-16 bottom-16 left-0 right-0 flex flex-col">
    <div class="flex-1 overflow-y-auto overflow-x-hidden">
      <h1>Main Content</h1>
    </div>
  </main>
  <footer class="h-16 flex-shrink-0 bg-gray-200">
    <p>Footer</p>
  </footer>
</div>

• 去掉滚动条

::ng-deep html,body {
    height: 100%;
    overflow: hidden !important;
}