how can i make this be height: 100vh on mobile and or scrollable

Issue

I am working on a small Web-App. I want to make it responsive for smaller devices. Problem is, on mobile, the sidebar is not scrollable to see the last item on bottom, and i don't know how to make it look good on mobile screen.

Solution would be something like:

@media (max-width: 500px) {
  #sidebar {
    height: 100vh;
  }
}

but this isn't working and idk why. any ideas?

Solution

You can try this inside your "nav" tag

height: 100%;
overflow: scroll;

It's because you working with pixels. It's better for responsive sites to work with a percentage number. Also, try to search for "overflow" propriety

Answered By - Bob Farias