父元素设min-h-screen对子元素的影响及React全屏适配疑问

为什么h-screen可行，min-h-screen不行？ #

Tailwind的h-1/2这类分数高度类，是基于父元素的显式高度值来计算的：

• h-screen给父元素设置了固定的100vh高度，属于明确的数值高度，子元素的h-1/2能直接取这个值的一半，所以表现正常。
• min-h-screen只是设置父元素的最小高度为100vh，但父元素的实际高度是auto（由内容撑开）。当内容不足时，父元素高度等于100vh，但它本质上还是自适应高度，没有明确的固定高度值，因此子元素的分数高度找不到参照基准，只会默认由内容撑开，不会显示为父元素高度的一半。

解决h-screen滚动时无法铺满的问题 #

h-screen的问题在于它把父元素高度固定为视口高度，当页面内容超过视口时，内容会溢出滚动，但父元素本身不会被拉长，导致背景色等无法铺满整个滚动区域。以下是几种可行的解决方案：

方案1：用Flex布局提供高度上下文 #

给父元素添加flex flex-col，结合min-h-screen，让父元素既保证最小视口高度，又能随内容扩展，同时给子元素提供明确的高度参照：

<div className="min-h-screen flex flex-col bg-blue-500">
    <div className="h-1/2 bg-red-500"></div>
</div>

此时父元素的高度会自适应内容，子元素的h-1/2会基于父元素的实际高度计算，无论内容是否溢出滚动，父元素都会铺满整个页面。

方案2：直接用vh单位定义子元素高度 #

如果子元素的高度只需要基于视口高度的比例，不需要跟随父元素的内容高度变化，可以直接用h-[50vh]代替h-1/2，不依赖父元素的高度上下文：

<div className="min-h-screen bg-blue-500">
    <div className="h-[50vh] bg-red-500"></div>
</div>

方案3：全局设置html/body高度+父元素组合类 #

先在全局样式中设置html和body的高度为100%，确保根节点有明确的高度：

html, body {
    height: 100%;
}

然后父元素同时使用h-full和min-h-screen，让父元素继承根节点的视口高度，同时在内容溢出时自动扩展：

<div className="h-full min-h-screen bg-blue-500">
    <div className="h-1/2 bg-red-500"></div>
</div>

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