如何使指定Div占满屏幕高度且不出现滚动条？无法修改父元素类

方案1：直接使用h-full类 #

父元素（蓝色区域）已通过flex-1在最外层flex布局中占据了导航栏和页脚之外的剩余屏幕高度，给目标粉色div添加h-full类，即可让它完全继承父元素的高度，自动适配导航栏、页脚的动态高度变化，不会出现滚动条。

修改后的代码：

<div class="flex flex-col min-h-screen">
    <div class="bg-black text-white h-[65px]">
        这是导航栏，65px仅为示例，高度在每个页面中是动态的
    </div>

    <div class="bg-blue-200 flex-1">
        内容区域

        <div class="bg-pink-300 h-full">
            我希望此Div占满屏幕高度且页面不出现滚动条，使用`h-screen`会出现滚动条
        </div>
    </div>

    <div class="bg-black text-white h-[65px]">
        这是页脚，65px仅为示例，高度在每个页面中是动态的
    </div>
</div>

方案2：适配内容区域存在其他元素的场景 #

如果内容区域还有其他元素，需要粉色div占据剩余空间，可以在粉色div外层嵌套一个带h-full flex flex-col类的容器，再给粉色div添加flex-1类。这样即使内容区域有额外元素，粉色div也会自动填充剩余高度，同时适配导航栏和页脚的动态高度。

修改后的代码：

<div class="flex flex-col min-h-screen">
    <div class="bg-black text-white h-[65px]">
        这是导航栏，65px仅为示例，高度在每个页面中是动态的
    </div>

    <div class="bg-blue-200 flex-1">
        <div class="h-full flex flex-col">
            <p>其他内容元素</p>
            <div class="bg-pink-300 flex-1">
                我希望此Div占满屏幕高度且页面不出现滚动条，使用`h-screen`会出现滚动条
            </div>
        </div>
    </div>

    <div class="bg-black text-white h-[65px]">
        这是页脚，65px仅为示例，高度在每个页面中是动态的
    </div>
</div>

内容的提问来源于stack exchange，提问作者Fred Hors