css - 如何用顺风css填充视口(viewport)的高度

Question

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

从文档中获取这个示例 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>

如何让它拉伸(stretch)到屏幕底部？

Answer 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>

链接到顺风播放中的一些片段(添加背景颜色示例以澄清它): https://play.tailwindcss.com/8Qd822yY4w