Good morning, personal.
I need to align elements in the bottom of a parent div.
This is a chat screen where messages are displayed whenever there are new ones at the bottom of the window.
However, I can not force the placement at the bottom, just like whatsapp would be in whatsapp when typing and sending messages, they are at the bottom.
Does anyone have any tips on how to do this?
NOTE: I'm not using flex. Only relative and absolute positioning.
Colleague, I chatted last month and did not bother to leave the messages in bottom, I just printed them from the old ones to the new ones one under the other and I forced the SCROLL of the DIV always down. This will work fine in your need, just put the parent DIV absolute and messages with fixed width to use more than 50% of the width of the parent DIV, so the messages will print one underneath the other.
Look how it was:
The container must have relative positioning and the element to be set 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>