Chakra UI 如何将App组件设为全屏高度？设置body 100%无效如何解决

仅设置body标签的height: 100%不生效的核心原因是html根标签、App挂载的根容器（通常是id为root的div）默认高度也不是全屏，需要同步配置，以下是两种可行实现方式：

方式一：全局样式配置（推荐） #

通过Chakra的主题配置统一修改全局样式，后续所有百分比高度都可以正常继承：

• 第一步：自定义Chakra全局主题，给html、body、根挂载容器设置全屏高度，同时清除默认边距：

import { extendTheme } from '@chakra-ui/react'

const customTheme = extendTheme({
  styles: {
    global: {
      'html, body, #root': {
        height: '100%',
        margin: 0,
        padding: 0,
      }
    }
  }
})

• 第二步：将自定义主题传入ChakraProvider组件，之后直接给App组件的最外层容器添加h="100%"属性即可。

方式二：直接使用视口高度单位 #

无需修改全局样式，直接给App最外层容器设置视口高度属性即可：

• 不需要适配内容溢出的场景，直接设置h="100vh"
• 需要适配内容超出屏幕高度时自动撑开的场景，设置minH="100vh"
• 如果页面存在固定高度的头部/底部导航，可通过calc动态调整高度，例如h="calc(100vh - 60px)"（60px为头部导航高度）

注意：如果App内部有嵌套的子容器需要继承全屏高度，需要逐层为所有父级容器设置h="100%"，否则子容器的百分比高度无法正常生效。

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