Как сделать автоматическую высоту для блока с position:fixed?

Question

[abbrakadabbra]

Имеется модальное окно с position: fixed, внутри которого контент может быть разной длины.

Если контента мало - то все хорошо - он влазит в экран.

Но если контента много, то он упирается в нижнюю границу экрана и больше не тянется, а также не поддается на изменение высоты.

Пробовал гуглить, оборачивать в доп дивы, играть с высотой и другими свойствами CSS, но результата пока не достиг. Если что модальное окно из примера: ruseller.com/lessons/les1556/demo/index.html

Answer 1

[Андрей]

Посмотрите как это реализовано тут codepen.io/anon/pen/adEMvL
(откройте средства разработчика и посмотрите классы)

Comments

[abbrakadabbra]

Замечательный плагин. Нашел страницу разработчика и воспользовался им, заменив предыдущее решение.

Всем кому интересно: dimsemenov.com/plugins/magnific-popup

Answer 2

[Freddi]

если из того примера то у .modalDialog overflow-y: scroll;

Comments

[abbrakadabbra]

Блок начал менять высоту по контенту, но появился горизонтальный скролл без прокрутки.

[Vitaliy]

abbrakadabbra: overflow-y: auto;

Answer 3

[Zheka Dzecina]

Не совсем понятно, как должен себя вести попап, если много контента?

Comments

[abbrakadabbra]

Zheka Dzecina обновил стартпост (добавил скрин). Текст обрезается и уходит за границу экрана. Можно задать position:absolute главному диву, но тогда начнется гемор с центровкой, нахождением окна на странице (все улетит к шапке).

[Zheka Dzecina]

я так понимаю, нужно чтобы скролл добавлялся, когда попап слишком длинный?

[abbrakadabbra]

Zheka Dzecina: Скролл не нужен, надо просто растянуть блок по всей высоте текста. Как если заменив fixed на absolute - вы увидите как растянулось окно. Так и нужно! :)

Answer 4

[Кирилл]

в css height чтобы было пустое

Comments

[abbrakadabbra]

Так не работает. Его там и так нет.

Answer 5

[Владимир Сергеевич]

Можете добавить конкретики? Там будет только текст? И как должен вести себя контент внутри модального если он не помещается? Модальное должно расширяться?

Comments

[abbrakadabbra]

Просто окно должно по высоте автоматически растянуться. Внутри будет текст и другие данные, но это не столько важно. Например сделайте главному контейнеру не position fixed, а absolute и вы увидите как он растянется по всей высоте контента! Так и нужно. А в данном случае окно не тянется, а просто уперлось в нижнюю границу браузера, т.к. fixed не видит потока.

[Владимир Сергеевич]

Если все правильно понял, то вот: https://jsfiddle.net/VladimirZhid/dyn6rd9t/
Другой способ центровки блока по центру, но не забудь префиксы подписать к TRANSFORM
Сейчас блок центрируется по центру можешь двигать его атрибутами top и left

[abbrakadabbra]

Владимир Жданов: по сути ваша корректировка работает также, просто сделано по-другому. Текст все-равно не растягивает по высоте контейнер, а прячется за границей (попробуйте добавить много текста в ваш fiddle).

[Владимир Сергеевич]

abbrakadabbra: Он выйдет за край если количество текста больше чем высота всего окна. Что должно происходить в этой ситуации? Появляться скролл?

[Владимир Сергеевич]

Может у нас что-то по разному работает? Какой у Вас браузер? потому что по комментариям видно что что-то мы не понимаем друг друга.

[abbrakadabbra]

Владимир Жданов: вопрос решен. Спасибо за участие! Посмотрите выбранное решение выше.

Answer 6

[Константин Величко]

codepen.io/Zoxon/pen/dGJEgJ
Нажимайте кнопки «View Compiled» чтобы посмотреть css и html