Next.js Discord

Discord Forum

How do I make this element span entire page (screen height)

Answered
Rhinelander posted this in #help-forum
Open in Discord
RhinelanderOP
Not so much next.js specific problem but rather styling one.

My layout
{/* Nav has position fixed so thats why apply padding to main (I could change it to sticky) */}
      <AppNavigation /> 
      <main className="max-h-screen h-full pt-20">
        {children}
      </main>


My component
    <div className="h-full flex flex-col container">
      <h1 className="text-4xl font-medium text-center py-6">Heading 1</h1>
      <div className="flex-grow lg:grid lg:grid-cols-2 lg:gap-x-6">
        <div className="bg-red-200 h-full">E1</div>
        <div className="bg-red-200 h-full min-h-max">E2</div>
      </div>
    </div>


My navigation
<header className="fixed top-0 h-20 w-full border-b bg-background z-50">
{/* The rest of the code */}
</header>
Answered by Rhinelander
Oh it turns out I just forgot to add this code 
:root,
html,
body {
  height: 100%;
}
View full answer

1 Reply

RhinelanderOP
Oh it turns out I just forgot to add this code 
:root,
html,
body {
  height: 100%;
}
Answer