Greetings! There is a block at the bottom of the screen, and above it is a block that dynamically changes its height. How to make so that this lower unit does not move down, and the block that changes its height, climbed up and not down? Position: fixed does not help. like the other position. The picture shows a chat. When you click on enter, it expands and shifts the icons under the chat down. I want to make it so that the div, highlighted in red (it is not visible, the attachments are placed there), was like reinforced concrete, so that its figs moved. Then, the chat will expand upwards (in the direction indicated by the arrows). enter image description here

  • Specify the question. Although a little bit of source code skinte, it is not very clear what does not work. - nick
  • @ L'Esperanza, updated the question. - exStas
  • Scroll up or scroll down ... Do a nailed footer (lower block) position: fixed; It will always be reinforced below! And changeable content - change to health, it will crawl up or down the same thing (a scroll will appear). - HamSter
  • one
    @ElenaSemenchenko, the problem is that it is just important where the chat block will crawl. Up need. And if we simply set a certain height to an element, then, by default, the movement will occur downwards. Even if he stretches himself. - nick
  • @ElenaSemenchenko, I do not need a scroll. I need to chat area climbed up to the border I have indicated, pressing the history of messages. - exStas

2 answers 2

Add the following style parameter to the "attachments" block div :

 position: fixed;

The div of the chat block in the style of the position parameter can be anything other than fixed . Here we need another parameter:

 overflow-y: auto;

Next, I would add some 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; });

Now I will explain what's what. position: fixed; the block of "attachments" is needed so that it is "as reinforced concrete", as you requested. overflow-y: auto; You can add to the chat box so that it scrolls, if suddenly the height of its content has become greater than the height of the page. And the listener in Javascript helps us to determine the moment when the length of the chat block changes, thereby moving it up so as not to affect the "reinforced concrete" block of "attachments". And also pay attention to the line if (i3 < 0) { - instead of zero, indent from the top menu (if it is), otherwise you will not see it later in the chat.

  • This is, of course, all well, thanks. But I would like to know if this is possible with the help of css. I have a project in java, where chat is embedded in native javascript. And this is already a finished item with its api and plugins. And directly access to the elements of the chat is extremely difficult. I will try to add your styles, I wonder if it will work or not. If not. then it looks like you have to redefine all activations. In any case, thanks for trying to help! - exStas
  • I came up with another option without javascript. See my second answer. - nick

Find your chat div block. Suppose its sample code is:

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

Create a second div , and put the chat div in it.

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

We write the following style:

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