React中div设置height:'100%'无效，高度显示为0的问题

问题原因 #

当元素设置height: 100%时，浏览器需要从父元素获取明确的高度参照值才能计算该元素的高度。如果父元素（包括最顶层的html和body）没有设置具体高度，仅靠内容撑开，那么子元素的height:100%会因没有参照而失效，最终高度为0。

你的场景中，html和body仅设置了text-align: center，默认高度由内容决定；且包裹目标div的所有父元素也未设置高度，导致目标div的height:100%无法生效。

解决方案 #

方案1：给所有祖先元素设置100%高度

1. 更新App.css，给html和body添加高度：

body, html {
    text-align: center;
    height: 100%;
    margin: 0; /* 移除默认边距，避免出现不必要的滚动条 */
}

2. 确保包裹目标div的所有父元素（比如React项目中默认的#root容器）也设置height:100%：

#root {
    height: 100%;
}

3. 如果目标div还有其他父组件的容器div，同样给它们添加height:100%样式，直到所有祖先都有明确的高度值。

方案2：使用视口单位替代百分比高度

不需要依赖父元素高度，直接用100vh（视口高度的100%）设置目标div的高度：

return (
    <div style={{ width: '100%', height: '100vh', overflow: "hidden" }}>
        {/* some code */}
    </div>
)

注意：vh单位会包含浏览器的顶部导航栏，在移动端可能出现内容被遮挡的情况，若需要更精确的视口高度，可结合JavaScript动态计算。

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