Как открыть длинный html блок в модальном окне?

Question

[Александр Мищенко]

Добрый день. Есть сайдбар в вордпресс. В мобильной версии этот сайдбар скрываеться display:none Я создал копию сайдбара для мобильной версии и ее нужно вывести в модальном окне. По высоте блок где то 700рх, и если я ставлю position:absolute; top:0; то блок закрепляеться в верху экрана и скройлиться до самого низа. НО контент который под абсолютным блоком длинее и его видно. Как ограничить высоту блока только его высотой?

Comments

[mahmudchon]

"Как ограничить высоту блока только его высотой?"
?

[Александр Мищенко]

mahmudchon, что бы если открыть модальное окно то при скролле этот блок заканчивается и скройлиться основной блок. Как ограничить скролл только до конца модального окна

[mahmudchon]

Александр Мищенко, контролировать скролл js скриптами тогда. Но мне кажется Вы все усложняете и можно было все проще сделать. Лучше бы пример выкатили и Вам бы уже кучу вариантов накидали как это можно сделать практичнее и почему.

[Ankhena]

Я создал копию сайдбара для мобильной версии

Не нужно делать ни от чего копий, если можно обойтись без этого. А раз это будет модалка с fixed, то её прекрасно можно делать из оригинала.

При открытии модалки можно убирать скролл у body, ограничивать высоту модалки, например, 80vh. И задавать ей скролл.

[Александр Мищенко]

Ankhena, спасибо Ваш вариант подошел идеально.

Answer 1

[Владимир Кашутин]

Как вариант, у менюшки делать

position: fixed;
top: 100px;
height: calc(100vh - 100px);
overflow-y: scroll;

* Значение top взято с потолка

Answer 2

[nuffyweb]

При открытии сайдбара в мобильной версии, добавлять к body класс : "overflow-hidden"
.overflow-hidden {
overflow: hidden;
}