How do I fix the height of my column to the viewport?

Ask us anything
1

I am testing a 3 column layout, I would like the height of the first column to match the view port and not scroll, I am using this for the menu.

I would like the content in the 2 additional columns (list view and detail view) to scroll if the content exceeds the viewport.

I have tried setting the height to be 100vh but that does not work.

Here is a video of the layout and issue:
Loom | Free Screen & Video Recording Software | Loom

Any ideas on how to approach this? Thanks in advance.

2

Hi,

  • Your first column should have a height at 100vh
  • Your second and third columns should have a wrapper around them. This wrapper should have a max-height at 100vh, and an overflow set to auto.
1 Like
3

Thank you Aurelie! That solved the first column issue but breaks the structure of the other columns.

I used a div as the wrapper in this example.