Как сделать, чтобы div при добавление контента расширялся вверх а не вниз?

Question

[vertically-challenged]

У меня есть два блока, один выводит список сообщений, а второй - кастомный input, сейчас они работают как на изображении, при добавлении контента в input он расширяется вниз, но как сделать, чтобы при добавлении контента он расширялся не вниз, а вверх, и сжимая верхний блок, а не перекрывая его?

Comments

[Ankhena]

По мотивам этого https://codepen.io/AnnaSummer/pen/poLbKKa

[vertically-challenged]

Ankhena, ну чтобы работало как в Телеграме

[Ankhena]

vertically-challenged,

ну чтобы работало как в Телеграме

При такой формулировке - вам на фриланс.

Покажите, что вы делали и что именно не получилось на codepen.io
На что похоже я показала в примерах выше. Но есть и альтернативные варианты.

[Алексей]

По факту, речь не о "расширении" куда либо, а всего лишь о том, как сделать scroll в нужную точку. В данном случае - к нижней кромке input-а. Отсюда и пляшите, jquery в помощь.

[vertically-challenged]

Алексей, нет-нет, скролл в нужной точке, но при добавлении контента в input он должен растягиваться от 1 до 4х строк, и он растягивается вниз, растягивая контейнер в котором находится, а не вверх, сжимая верхний блок сообщений и оставляя высоту контейнера неизменной.
Как все это сделать я разобрался, но без JS правда не получилось

[vertically-challenged]

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

Answer 1

[vertically-challenged]

Без JS не получилось

Сначала я установил контейнеру, в котором находятся эти два блока, position: absolute; и bottom: 0;, что прижало его к нижней части экрана, и теперь, когда я вводил сообщение, input стал растягиваться вверх, толкая блок с сообщениями выше, а сжимать блок сообщений пришлось уже с помощью JS, получив offsetHeight блока обертки input'а и вычитая его из высоты блока сообщений при изменении input'а

Comments

[Aison]

оо, круть. тоже сейчас парюсь, но js плохо знаю, не поделитесь Вашим творением?

[vertically-challenged]

Aison, вот написал это на codePen, чтобы было понятно, а само творение лежит на GitHub. Скрипт совсем маленький

Answer 2

[Николай]

так что-ли? https://codepen.io/bulankin/full/wvmdmya