如何用 tailwind 填充视口的高度 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

如果你的意思是元素占据视口的所有高度，应该与

一起使用

height: 100vh;

Answer 2

当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%;
}

Answer 3

有一个名为 .h-screen 的顺风 class，可转换为 height:100vh; css。这也应该有效。详情请参考Official Tailwind documentation

Answer 4

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

Answer 5

这是我必须做的来解决它：

  onMounted(async () => {
  
    setViewHeight();
  
     window.addEventListener("resize", () => {
         setViewHeight();
    });

    function setViewHeight() {
       let vh = window.innerHeight * 0.01;
       document.documentElement.style.setProperty("--vh", `${vh}px`);
    }

 })

Answer 6

您可以在主 div 中使用 h-screen class。查看更多 here

Answer 7

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

Answer 8

您可以将 min-h-screen 添加到父级 <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>

Link 到 tailwind play 的一些片段（添加背景颜色示例以澄清它）：https://play.tailwindcss.com/8Qd822yY4w

Answer 9

我正在使用 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>

如何用 tailwind 填充视口的高度 css

How to fill the height of the viewport with tailwind css

css

flexbox

tailwind-css