Как динамически увеличивать высоту блока?

Question

[Михаил]

Есть затемненный фон, который проявляется вместе с формой при нажатии на кнопку.
Проблема в том, в форме есть textarea, который увеличивается динамически и тем самым увеличивает высоту формы, а форма выходит за границы фона

Вообщем нужно чтобы блок затемнения покрывал всю страницу, вне зависимости от размеров

Стили overlay:

&__overlay
		position: absolute
		width: 100% 
		height: 100vh
		top: 0px
		left: 0px
		background-color: rgba(0, 0, 0, .3)
		overflow: visible
		// display: none
		z-index: 1001

Answer 1

[Арсений Матыцин]

Не уверен, что правильно понял, но попробуй добавить overflow-y: auto; своей обертке. Ты же что-то типа модалки с переполнением хочешь сделать? Если нет, то вместо фиксированной высоты сделать min-height: 100vh;.

Answer 2

[Just Me]

1) для __overlay position: fixed

2) если всё равно не поможет, увеличивай высоту динамически через javascript, после увеличения высоты textarea

Comments

[Михаил]

position: fixed, пробовал, не помню почему, но не помогло.
А второй вариант: на jquery считывал изменения textarea.change() и задавал __overlay высоту по outerHTML(true). Но там проблема была в том, что высота расчитывалась как-то криво и значение присваивалось только после расфокуса textarea.

Подскажите как сделать динамическое изменение __overlay сразу как textarea увеличивается в размерах

[Just Me]

Михаил, выложи свой код на jsfiddle или codepen