"ajuster le contenu d'une div vers le bas ?
Le
Une Bévue

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
<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
[...]
Sans avoir pris le temps de dépeloter votre problème précis, je me
permets de vous signaler un truc bien pratique. La hauteur (height,
max-height, min-height, ce que vous voulez) peut s'écrire:
height: calc(100vh - 80px);
100vh c'est 100 fois 1% de la hauteur du viewport. 80px, c'est 48px -
32px. Mais vous pourriez écrire, vachement plus souple:
height: calc(100vh - (52px + 1.5em));
(c'est un exemple, header de 52px et footer de 1.5em).
--
Pierre Maurette
Une Bévue :
[...]
Sans avoir pris le temps de dépeloter votre problème précis, je me
permets de vous signaler un truc bien pratique. La hauteur (height,
max-height, min-height, ce que vous voulez) peut s'écrire:
height: calc(100vh - 80px);
100vh c'est 100 fois 1% de la hauteur du viewport. 80px, c'est 48px +
32px. Mais vous pourriez écrire, vachement plus souple:
height: calc(100vh - (52px + 1.5em));
(c'est un exemple, header de 52px et footer de 1.5em).
(supersedes - correction d'une typo)
--
Pierre Maurette
Ah super merci bien !
En fait j'ai résolu mon problème en faisant comme je l'ai suggéré :
mettre les chats les plus récents en haut.
Mais ce que vous me dites m'intéresse, j'ai ajouté dans mon code css :
min-height: calc(100vh - 48px);
max-height: calc(100vh - 48px);
overflow-y: scroll;
ça roule !