"ajuster le contenu d'une div vers le bas ?

mon body est ainsi :

<header 48 px de haut approx />
<div id='container'>
<h3>Un sous titre</h3>
<div id='messages'>
<p class='row'>
<span class='nickname'>Nickname</span>
<span class='content'>Content</span>
</p>
<p class='row'>
<span class='nickname'>Nickname 2</span>
<span class='content'>Content 2</span>
</p>
</div>
</div>
<footer 32 px de haut approx />

au départ, il n'y a rien dans "div id='messages'"
c'est un système de chaat par websoket.

au fur et à mesure de la discussion, du chaat, le nombre de messages
augmente jusqu'à dépasser la hauteur possible pour "div id='messages'"

j'ai mis, dans les css :
#messages {
font-size: 75%;
line-height: 85%;
letter-spacing: -1px;
min-height: 580px;
max-height: 580px;
overflow-y: scroll;
min-width: 100%;
max-width: 100%;
overflow-x: hidden;
}

l'overflow-y marche très bien sauf que ce qui est caché, c'est le
dernier message qui est "sous" le footer, en fait, il faut que je scroll
vers le bas pour faire monter le contenu de "div id='messages'" et ainsi
voir le dernier message.

la question est : peut-on inverser le schimiliblic ?
c'est à dire quand un nouveaau message arrive, s'il dépasse de "div
id='messages'" le tout remonte vers le haut ?

pour essayer ça j'ai une fonction addMessage(event) qui ajoute un <p
class='row'/> dans #messages :
function addMessage(event) {
var n = Math.floor(Math.random() * messages.length);
var p = document.createElement('p')
p.setAttribute('class', 'row');
var span_nickname = document.createElement('span')
span_nickname.setAttribute('class', 'nickname');

span_nickname.appendChild(document.createTextNode(messages[n].nickname));
p.appendChild(span_nickname);
var span_content = document.createElement('span')
span_content.setAttribute('class', 'content');

span_content.appendChild(document.createTextNode(messages[n].content));
p.appendChild(span_content);
messages_elt.appendChild(p);
}

avec :
messages_elt = document.getElementById('messages');

et messages une array de messages bidon :
messages = [
{nickname: 'Yvon', content: 'Hello tout le monde !'}
, {nickname: 'toto', content: 'Salut la compagnie !'}
, {nickname: 'Yvon', content: 'Ç va « toto » ?'}
, {nickname: 'vostro', content: 'Salut les mecs !'}
, {nickname: 'vostro', content: 'Ça boum ?'}
, {nickname: 'Yvon', content: 'Oui, ça va, coussi-coussa !'}
];


peut-être que le + simple serait de renverser la manip :
au lieu d'avoir (dans l'ordre chronologique) :
[message 1]
[message 2]

[message n]

faire en sorte que le message le plus récent apparaisse en haut :
[message n]
[message n - 1]

[message 2]
[message 1]


ainsi les premiers à disparaître de "div id='messages'" sont less plus
anciens

---

• Partager ce contenu :