25

我只是在尝试 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>

如何让它伸展到屏幕底部？

4

8 回答 8

52

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

于 2018-04-24T05:03:22.170 回答
10

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

于 2020-03-29T12:14:45.947 回答
7

您可以添加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

于 2021-08-27T06:22:17.207 回答
5

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

于 2021-08-03T14:05:02.770 回答
3

您可以在主 div 中使用 h-screen 类。在这里查看更多

于 2021-08-02T15:00:09.983 回答
0

当 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%;
}
于 2017-12-21T13:47:35.380 回答
-3

这是我必须做的解决它：

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

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

 })
于 2021-05-12T09:04:52.290 回答
-6

如果您的意思是元素占据视口的所有高度，则应使用

height: 100vh;
于 2017-12-21T13:35:18.393 回答