Скролл для меню в плавающем блоке

[alex_web64]

Здравствуйте.

На сайте есть шапка с position: fixed, в которой есть выпадающее меню position: absolute. В этом меню может быть очень много пунктов, из-за этого на мобильных устройствах они выходят за край экрана. Прокрутка не помогает, так как шапка зафиксирована вверху сайта и все это остается на месте. Мое решение - добавить скролл для меню. Но как это сделать, если оно имеет динамическую высоту? jsfiddle

Edited August 4, 2018 by alex_web64

[AlexZaw]

для ul задайте 

 max-height: 100vh;
 overflow: auto;

 

[alex_web64]

нужно еще учитывать высоту шапки, она тоже динамическая. А меню начинается от ее нижней точки

[AlexZaw]

Так меню и будет начинаться от нижней точки, так как у него задано top:100%; 

Вот только вам и контент нужно отодвигать от верха страницы, что бы он не закрывался фиксированной шапкой, но к меню это отношения не имеет

[alex_web64]

меню находится в шапке и позиционируется относительно ее, при top: 100% - от ее нижней точки. Поэтому, если к меню применить max-height: 100vh, оно будет выпадать с области просмотра снизу экрана на высоту шапки. Конечно, можно сделать шапку фиксированной по высоте, что очень не хочется, а для меню прописать max-height: calc(100vh - высота шапки). Но в идеале - все размеры должны быть динамические.

Edited August 5, 2018 by alex_web64

[AlexZaw]

6 часов назад, alex_web64 сказал:

Поэтому, если к меню применить max-height: 100vh, оно будет выпадать с области просмотра снизу экрана на высоту шапки.

Если бы вы попробовали сделать то что я предложил выше - вы бы не писали этого сообщения.

[alex_web64]

Естественно я проверял ваш код, и вполне очевидно, что он не будет работать. Сделал более наглядный пример для вас  https://jsfiddle.net/j0wqL4mh/24/ Вы видите все 50 пунктов?

[AlexZaw]

21 минуту назад, alex_web64 сказал:

Вы видите все 50 пунктов?

Пардон, не сразу понял что имелось ввиду под "выпадением снизу экрана" и не обратил внимание на то что не все пункты меню помещаются на экране. Тогда с помощью js получать высоту шапки и задавать высоту для списка

[alex_web64]

Сделал фиксированной по высоте шапку, а дальше calc и 100vh. Спасибо за идею с этими единицами измерения.

[AlexZaw]

3 минуты назад, alex_web64 сказал:

Сделал фиксированной по высоте шапку

Если нужно могу набросать скрипт для динамической шапки