0

Приветствую!Есть блок внизу экрана, а над ним блок, который динамически изменяет свою высоту. Как сделать так, чтобы этот нижний блок не передвигался вниз, а блок, который меняет свою высоту, лез вверх, а не вниз? Position:fixed не помогает. как и другие position. На картинке изображен чат. При нажатии на enter он расширяется и сдвигает иконки под чатом вниз. Я хочу сделать так, чтобы див, выделенный красным (он не виден, туда аттачменты кладутся), был как железобетонный, чтобы его фиг что подвинуло. Тогда, чат будет расширяться вверх (в сторону, куда указывают стрелочки). введите сюда описание изображения

exStas
  • 357
  • 1
  • 12
  • Конкретизируйте вопрос. Хоть немножко исходного кода скиньте, не очень понятно, что не получается. – nick Aug 25 '16 at 06:06
  • @L'Esperanza, обновил вопрос. – exStas Aug 25 '16 at 06:16
  • Скролл вверх или скролл вниз ... Делаете прибитый футер (нижний блок) position: fixed; Он всегда будет внизу железобетонно! А изменяемый контент - изменяйте на здоровье, вверх он будет ползти или вниз одно и то же (появится скролл). – SVE Aug 25 '16 at 08:35
  • 1
    @ElenaSemenchenko, проблема то в том, что как раз важно куда блок чата будет ползти. Вверх надо. А если мы просто зададим определённую высоту элементу, то, по умолчанию, движение произойдёт вниз. Даже если он сам растянется. – nick Aug 25 '16 at 08:41
  • @ElenaSemenchenko, мне не нужен скролл. Мне нужно, чтобы область чата лезла вверх до указанной мною границы, прижимая историю сообщений. – exStas Aug 25 '16 at 11:01
  • Возможный дубликат вопроса: Как всегда прижимать footer к низу экрана? – MobiDevices Apr 06 '18 at 20:57

2 Answers2

2

У div блока "аттачментов" добавь следующий параметр стиля:

position: fixed;

У div блока чата в стиле параметр position может быть любым, кроме fixed. Здесь нужен другой параметр:

overflow-y: auto;

Далее я бы добавил немного Javascript.

var i1 = document.getElementById(...); // Твой блок div чата
var i2 = i1.clientHeight;
i1.addEventListener("resize", function () {
    var i3 = i1.getBoundingClientRect().top - i1.clientHeight + i2;
    if (i3 < 0) {
        i3 = 0;
    }
    i1.style.top = i3;
});

Теперь я объясню что к чему. position: fixed; у блока "аттачментов" нужен затем, чтобы он был "как железобетонный", как ты и просил. overflow-y: auto; добавить в блок чата можно затем, чтобы он прокручивался, если вдруг высота его содержимого стала больше высоты страницы. А листенер в Javascript нам помогает определить момент, когда изменяется длина блока чата, тем самым передвигая его вверх, чтобы не затронуть "железобетонный" блок "аттачментов". И ещё обрати внимание на строку if (i3 < 0) { - вместо нуля подставь отступ от верхнего меню (если оно есть), а то ты его потом за чатом не увидишь.

nick
  • 2,510
  • Это, конечно, хорошо все, спасибо. Но я бы хотел узнать возможно ли это с помощью css. У меня проект на java, где чат встроен нативным javascript. И это уже готовый элемент со своим api и плагинами. И напрямую обращаться к элементам чата крайне затруднительно. Я попробую добавить ваши стили, интересно сработает или нет. Если нет. то, похоже, придется переверстывать всю активити. В любом случае спасибо за попытку помочь! – exStas Aug 25 '16 at 10:58
  • Я придумал другой вариант без Javascript. Смотрите мой второй ответ. – nick Aug 25 '16 at 11:03
0

Находим ваш блок div чата. Допустим его примерный код таков:

<div id="chat" style="chat">...</div>

Создаём второй div, и в него кладём div чата.

<div style="chat_area">
<div id="chat" style="chat">...</div>
</div>

Пишем следующий стиль:

div.chat_area {
    width: auto; //ширина твоего чата
    height: 100%; //высота твоего чата
    overflow-y: auto; //добавляем прокрутку если нужен (рекомендую т.к. вверх же потом некуда будет блоку уезжать)
    position: relative;
}
div.chat {
    position: absolute;
    bottom: 0px;
}
nick
  • 2,510