Chakra UI full height component

Just use css calc in your component: <Box h='calc(100vh)' />

In React.js you don't usually tinker around with the body tags (unless you know what you're doing). The standard practice is to create a Container Chakra component & apply respective Style Props to it.

On that note, here's what you can do instead:

// in your App.js

import { ChakraProvider, Container } from "@chakra-ui/react"

function App() {
  return (
    <ChakraProvider>
      <Container maxHeight="100vh">
        { /* ... contents of the container */ }
      </Container>
    </ChakraProvider>
  )
}

Notice the maxHeight style prop passed to the Container component. Chakra-UI will then style the container as if you're styling the "container" using the the max-height CSS property.

You can style that specific "container" with as many style props as Chakra-UI! And I recommend going through the documentations (see shared URL above) to figure what other style props are supported.

P.S: You can use a Box component too! But I prefer (and suggest) using the Container component instead because of its responsiveness & the ease of constraining it's child elements.

I had today the same problem, the height wouldn't extend as I wanted it. I'm using redwood.js together with Chakra-ui. My solution to extend the height was adding the style prop. I hope it helps someone

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" type="image/png" href="/favicon.png" />
  </head>

  <body>
    <div id="redwood-app" style='height:100vh'>
      <!-- Please keep the line below for prerender support. -->
      <%= prerenderPlaceholder %>
      </div>
</body>

</html>