如何用顺风css填充视口的高度答案

【问题标题】：如何用顺风css填充视口的高度
【发布时间】：2018-06-04 04:15:38
【问题描述】：

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

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

【问题讨论】：

标签： css flexbox tailwind-css

【解决方案1】：

您可以将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>

tailwind play 中一些 sn-ps 的链接（添加了背景颜色示例以澄清它）：https://play.tailwindcss.com/8Qd822yY4w

【讨论】：

【解决方案2】：

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

【讨论】：

.min-h-screen 看起来就是这样，就像控制台打开时 h-screen 不能正常工作

【解决方案3】：

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

【讨论】：

【解决方案4】：

这是我必须解决的问题：

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

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

 })

【讨论】：

喜欢看一个 Svelte 示例，但这里可能不是最相关的，因为 OP 仅关注 TailwindCSS。分享一个包含更多内容的解决方案可能会让读者感到困惑。仍然;一个可靠的解决方案！

【解决方案5】：

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

height: 100vh;

【讨论】：

谢谢，我只需要将 h-screen（又名高度：100vh）添加到父 div
问题是关于如何使用顺风恕我直言。

【解决方案6】：

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

【讨论】：

你的意思是h-screen？

【解决方案7】：

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

【讨论】：

获取height:100vh;是错误的，必须使用h-screen而不是h-full
@ced 正确，这是我的错误！谢谢
我认为.h-full 仅在定义父元素高度时才有效。喜欢：<div class="h-56 bg-yellow-300"> <div class="h-full bg-white">This will do the work</div> </div> 通过不定义高度，这将不起作用：<div class="bg-yellow-300"> <div class="h-full bg-white">This will NOT do the work</div> </div>
@AleksandrKopelevich 我认为 100vh = 100 视口高度。它与父母身高无关。
@NitinJadhav 当然。我在谈论使用 h-full 而不是 h-screen 的情况。虽然有点跑题了，我必须承认。

【解决方案8】：

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

【讨论】：