Kevin Powell - Community•3mo ago

I want my div (table) to take the entire remaining height of the screen without overflowing.

<div>unknown height</div>
<div>should take all remaining vertical space</div>

<div>unknown height</div>
<div>should take all remaining vertical space</div>

If it matters, I am using JS with tailwind. Another thing to note is that the second div is a table. The closest solution I could find was this article that sugestes absolute position. However, this requires me to know the top or height of the table, which I don't know.

1 Reply

MarkBoots•3mo ago

html, body { height: 100% }
body { 
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

html, body { height: 100% }
body { 
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

` html and body have full height body has 2 rows: - auto adjusts to the content - 1fr is the remaining space

Gaming

Programming

I want my div (table) to take the entire remaining height of the screen without overflowing.