Как в модальном окне сделать overflow: scroll без фиксированной высоты?

Question

[Alik Yaushev]

Уважаемые, есть модальное окно. Для мобильных версий оно растягивается по всем сторонам по ширине и высоте
Верхний блок неподвижен, а вот нижний, если весь текст не умещается, должен скролиться. Такое можно осуществить, если задать overflow: отличный от hidden и фиксированную высоту (max-height и height), что мне не подходит. У меня не фиксированная высота и в зависимости от разрешений экранов эта самая высота будет разной/отличной. При min-height: 100% или auto скролл не работает. Как быть?

Поступило предложение оверфловить контейнер внутри боди:
prntscr.com/a2mw9g - коннейтер модального.
prntscr.com/a2mwkh - контейнер боди
prntscr.com/a2mwpj - контейнер с текстом

Но такое почему то не сработало!?

код:

<div class="modal">
<div class="modal-header"></div>
<div class="modal-body">
<div class="modal-body-text">текст</div>
</div>
</div>

.modal {height: 100%;}
.modal-body {overflow:hidden;height: 100%;}
.modal-body-text {overflow:auto;}

Comments

[AlikDex]

у модального окна height 100% без мин. у modal-body overflow: hidden; высота тоже 100%. а у контейнера внутри боди уже overflow: auto;

Лениво на фиддле писать. Надеюсь понятно =)

[Alik Yaushev]

AlikDex: логику понял, но почему то не работает.

[Alik Yaushev]

AlikDex:
prntscr.com/a2mw9g - коннейтер модального.
prntscr.com/a2mwkh - контейнер боди
prntscr.com/a2mwpj - контейнер с текстом

[AlikDex]

https://jsfiddle.net/hxa3252y/
Так накидал на скорую руку =) Надеюсь то что нужно.

[Alik Yaushev]

AlikDex: спасибо, помогло. У меня не была задана высота у контейнера с текстом: height: calc(100% - 60px);

[AlikDex]

это высота modal-header вместе с отступами, если что.

[Alik Yaushev]

AlikDex: да, уже прочитал, не знал про calc ранее.

Answer 1

[kn1ght_t]

не уверен ни разу, что понял вас ))
https://jsfiddle.net/8v62jupr/

Answer 2

[Андрей Федоров]

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

Comments

[Alik Yaushev]

Поясните пожалуйста про высоту в vh. Я не понял, извините, если туплю. Пример кода добавил.

[Андрей Федоров]

alik_yaushev: Высоту скролируемого блока задайте в vh. У вас будет фиксированная высота относительно вьюпорта устройства, будь то десктоп или мобильное и overflow: auto сработает.

[Андрей Федоров]

alik_yaushev: codepen.io/aliencash/pen/obmpyg

[Alik Yaushev]

Андрей Федоров: полагаю это единица измерения как em, px и т.п. Мне фиксированные ширины не нужны, в вашем примере именно так. Или я не правильно понял?

[Андрей Федоров]

alik_yaushev: Высоту окна браузера попробуйте поменять. Поймете в чем дело...