1

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?

Deniz
  • 1,435
  • 14
  • 29

3 Answers3

2

The elements of you nav bar have heights, padding, border, margin.. in px or em.
They add up and overflow your height: 100vh.
The easiest solution is like Bob Farias suggested to add overflow-y: auto or overflow-y: scroll to 

#sidebar {
    height: 100vh;
  }


There are more laborious way to avoid scrolling and overflowing whom would be for example setting your elements "heights" to be fractions of 100vh, or redesigning your nav bar.

Pierre-Yves Legeay
  • 638
  • 5
  • 14
1

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

Bob Farias
  • 65
  • 6
0

The problem is that on mobile browsers such as Safari or Chrome, the browser's toolbar isn't taken into consideration. You can check out a more detail answer here.

A solution to this problem can be found here.

Nandra Mihnea
  • 31
  • 2
  • 8