Force a DIV element into the bottom

Question

Good morning, everyone.

I need to align elements at the bottom of a mother div.

This is a chat screen that messages are displayed whenever there are new ones at the bottom of the window.

However, I can not force the positioning at the bottom, as for example it would be in Whatsapp that when typing and sending messages, are at the bottom.

Does anyone have any tips on how to do this?

NOTE: I am not using flex. Only relative and absolute positioning.

Answer 1

Buddy, I had a chat last month and I didn’t bother to leave the messages in the bottom, I just printed them from the oldest to the newest one under the other and I forced the DIV SCROLL always down. This will work in your need, just put the parent DIV in Absolute and the messages with fixed width so as to use more than 50% of the width of the parent DIV, so the messages will be printed one under the other.

Look how it turned out:

Answer 2

The container must have relative positioning and the element to fix absolute positioning:

CSS:

.container {
  width: 100%;
  height: 300px;
  position: relative;
  background: #ccc
}

.elemento {
  width: 30%;
  height: 20px;
  background-color: #000000;
  position: absolute;
  bottom: 0;
  left: 0;
}

HTML:

<div class="container">
   <div class="elemento"></div>
</div>