0

Is there a way to have a scrollbar appear on a div depending on the devices height?

This menu is opened by a hamburger drawer on the side. Drawer contains 3 divs - login div, menu div and social media div You can reorder all 3 divs on your liking. My menu div is customization on how many items it will show.

My problem is that of there are about 10 items in the menu and is viewed on a phone. It overlays over the bottom div if there is one.

I would like it not to overlay other divs.

I tried using Css - Overflow-y:scroll but that requires a fixed height.

I tried using JS as well with this example http://jsfiddle.net/6WAnd/20/

But my header and footer can vary so it won't work P.S Maybe check if the div exist or not first? How would i implement this?

Is there another way i can achieve this?

KevinC
  • 71
  • 12
  • You may find this question useful [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window). – marianc Jul 21 '15 at 08:42
  • Hi there, I think I get what you are asking here. How about try using **media breakpoints** to choose when to use scroll or not. You might also consider using **min-height** or also try **height:100vh;** to get the viewport when on smaller screens. – AngularJR Jul 21 '15 at 09:29
  • Thanks for your replies, using VH seems like an option. Does it also need the overflow-y:scroll? Items in the menu can Vary from 5-10 with subitems – KevinC Jul 23 '15 at 04:21

0 Answers0