如何使用 Tailwindcss 为子元素赋予其 flex 父元素的完整高度答案

【问题标题】：How to give a child element the full height of its flex parent with Tailwindcss如何使用 Tailwindcss 为子元素赋予其 flex 父元素的完整高度
【发布时间】：2022-10-19 20:46:57
【问题描述】：

目前我有一个包含两个<div> 元素的视口：第一个在顶部用于导航，第二个#container 作为我所有内容的容器。将#container 设置为flex-grow 以填充视口的剩余部分。

<template>
    <div class="min-h-screen  flex flex-col">
        <div class="flex-grow-0">
            <navBar :user="user" />
        </div>
        <div id="container" class="flex-grow  flex flex-col">
            <!-- Content is injected here, replacing router-view -->
            <router-view />
        </div>
    </div>
</template>

在那个注入的内容中，我有几个<div> 元素，我希望第一个元素#landingPage 成为容器的整个高度。

<template>
    <div class="">
        <div id="landingPage" class="min-h-full">
            <!-- This div must be as tall as the container -->
            <p>First part</p>
        </div>
        <div>
            <!-- This div and those that may follow don't matter -->
            <p>Second part</p>
        </div>
    </div>
</template>

但是当我将它设置为min-h-full 时，它根本不会增长并保持<p> 的高度，如果我将其设置为min-h-screen，它当然会溢出视口的数量等于<navBar> 的高度。

我尝试尝试更多的 flex-classes，但这会保留第二个 <div>，而我只是希望 #landingPage 在不滚动的情况下可见。

如果不给<navBar> 的父级提供fixed 样式，我怎么能做到这一点？

【问题讨论】：

标签： html css css-position tailwind-css

【解决方案1】：

如果组件有多个子元素并且最后一个元素必须填充父元素的剩余高度，那么我们将在父元素上使用flex flex-col，在最后一个子元素上使用flex flex-grow，它必须填充父元素的剩余高度。

就像是：

<div class="flex flex-col h-screen">
    <div>
        ....
    </div>
      
    <div class="flex flex-grow">
        This will take all the remaining height of the parent
    </div>
</div>

【讨论】：