如何使用顺风CSS填充视口的高度

Question

我只是在尝试Tailwind CSS，想知道如何填充视口的高度。

从文档中获取此示例HTML

<div class="flex items-stretch bg-grey-lighter">
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

如何使其延伸到屏幕底部？

Answer 1

您可以添加min-h-screen到parent <div>，这将填充视点的高度。

不同之处h-screen在于它会延伸到屏幕上。当屏幕很小并且内容充满滚动条时，这会很有帮助。在这种情况下，背景将不会填充向上滚动部分的其余部分。

 <div class="flex items-stretch bg-grey-lighter min-h-screen">
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

链接到顺风游戏中的一些片段（添加了背景颜色示例以澄清）：https://play.tai​​lwindcss.com/8Qd822yY4w

Answer 2

我正在使用 NextJS + tailwindcss。NextJS 添加了一个<div id="__next">，所以这就是我的global.css

@tailwind base;
@tailwind components;
@tailwind utilities;
html {
  @apply h-full;
}
body {
  @apply h-full;
}
div#__next {
  @apply h-full;
}
main {
  @apply h-full;
}

在我的页面中我有

<main className="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">
  ...
</main>

Answer 3

您可以使用Tailwind CSS.h-screen类。

Answer 4

我知道这是一篇旧帖子，但我现在找到了它，当我试图在内容太少而无法填充屏幕时将背景颜色拉伸到屏幕大小，并避免在内容太少时背景颜色突然停止内容更多地取决于屏幕的大小（这种情况发生在 h 屏幕上）。我使用 min-h-screen 解决了这个问题。

Answer 5

有一个名为顺风的类.h-screen，可以转换为height:100vh;css。这也应该起作用。有关更多详细信息，请参阅官方Tailwind文档

Answer 6

当body的内容太少而无法填满整个屏幕时，我会使用flexbox来垂直拉伸较小的div。

确保body和父div有100%的高度，并使用flex box作为列并添加flex-basis以垂直且均匀地分布。

html, body {height: 100%;}

.flex {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.flex-1 {
/* or flex-grow: 1; */
flex-basis: 33.33%;
}