Kevin Powell - Community•9mo ago

Vertical scrolling without using absolute height

So, for simplicity's sake, let's say I have two components: Component1 and Component2. I also have a main footer that comes from layout.tsx. I want the entire page to always be h-[100dvh]. I want Component2 to take up all the available space between Component1 and Main footer (which means I cannot give Component2 an absolute height), and if there is an overflow, then Component 2 should be scrollable. How do I do this? I am using Tailwind, if that matters.

5 Replies

lko•9mo ago

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header, footer {
  min-height: 5rem;
  background-color: red;
}

main {
  background-color: blue;
  overflow-y: auto;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header, footer {
  min-height: 5rem;
  background-color: red;
}

main {
  background-color: blue;
  overflow-y: auto;
}

<header>
  header
</header>
<main>
 lorem1000
</main>
<footer>
  footer
</footer>

<header>
  header
</header>
<main>
 lorem1000
</main>
<footer>
  footer
</footer>

MarkBoots•9mo ago

use display grid with grid-template-rows: auto 1fr auto auto will take up the space that is determined by the component 1 and footer 1fr is the remaining space for component 2 --- oops a bit late

YouDontKnowMeOP•9mo ago

If I do this, won't the page height go past 100dvh once the content in component 2 grows?

MarkBoots•9mo ago

you can give comp2 an overflow-y: auto (like in lko's example)

YouDontKnowMeOP•9mo ago

Okay, thanks. !solved @lko @MarkBoots Thanks for the help

Gaming

Programming

Vertical scrolling without using absolute height