如何用顺风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>

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

原文由 bencarter78 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

height: 100vh;

原文由 vdelianny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Nitin Jadhav 发布，翻译遵循 CC BY-SA 4.0 许可协议