Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

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

3 réponses
Avatar
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...

3 réponses

Avatar
Pierre Maurette
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.



[...]

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
Avatar
Pierre Maurette
(supersedes )

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.



[...]

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
Avatar
Une Bévue
Le 17/10/2015 11:46, Pierre Maurette a écrit :
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)



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 !