Afficher le bas d'un élément avec défilement

**mathieu** · 27/03/2018, 13h56

Bonjour,

J'ai une zone avec du contenu HTML qui peut contenir n'importe quel élément et pour limiter la hauteur, le contenu pourra défiler en hauteur.
Ce que je n'arrive pas à faire est d'afficher directement le bas du contenu où les dernières contributions sont rajoutées régulièrement.

Je sens que c'est possible de faire cela avec du JavaScript mais ils s'agit juste de présentation des données donc je me demande comment faire cela en pur CSS.

Voilà le dernier test qui s'approche le plus de ce que je veux. La chose qui ne me convient pas avec cet affichage est que la zone défilante ne permet pas de remonter pour voir le début.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF8">
</head>
<body>
 
 
<style>
 
div.autour {
    
    width : 50em;
    height : 20em;
    
    overflow-y : scroll;
    
    position : relative;
    
    border : 2px solid #CC0;
    
}
 
div.autour div.conteneur {
    
    position : absolute;
    bottom : 0;
    
    text-align : justify;
    
    border : 2px solid #A0A;
    
}
 
</style>
 
 
<div class="autour">
<div class="conteneur">
 
    <p>
        Lorem ipsum
        Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides.
        Quam ob rem ut ii qui superiores sunt submittere se debent in amicitia, sic quodam modo inferiores extollere. Sunt enim quidam qui molestas amicitias faciunt, cum ipsi se contemni putant; quod non fere contingit nisi iis qui etiam contemnendos se arbitrantur; qui hac opinione non modo verbis sed etiam opere levandi sunt.
    </p>
 
    <p>
        Tantum autem cuique tribuendum, primum quantum ipse efficere possis, deinde etiam quantum ille quem diligas atque adiuves, sustinere. Non enim neque tu possis, quamvis excellas, omnes tuos ad honores amplissimos perducere, ut Scipio P. Rupilium potuit consulem efficere, fratrem eius L. non potuit. Quod si etiam possis quidvis deferre ad alterum, videndum est tamen, quid ille possit sustinere.
        Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.
        Sed tamen haec cum ita tutius observentur, quidam vigore artuum inminuto rogati ad nuptias ubi aurum dextris manibus cavatis offertur, inpigre vel usque Spoletium pergunt. haec nobilium sunt instituta.
        Iam in altera philosophiae parte. quae est quaerendi ac disserendi, quae logikh dicitur, iste vester plane, ut mihi quidem videtur, inermis ac nudus est. tollit definitiones, nihil de dividendo ac partiendo docet, non quo modo efficiatur concludaturque ratio tradit, non qua via captiosa solvantur ambigua distinguantur ostendit; iudicia rerum in sensibus ponit, quibus si semel aliquid falsi pro vero probatum sit, sublatum esse omne iudicium veri et falsi putat.
        Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus: hoste discursatore rupium abscisa volvente, ruinis ponderum inmanium consternuntur, aut ex necessitate ultima fortiter dimicante, superati periculose per prona discedunt.
        Et quoniam apud eos ut in capite mundi morborum acerbitates celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum sospitale nequi amicum perferentem similia videat, additumque est cautionibus paucis remedium aliud satis validum, ut famulos percontatum missos quem ad modum valeant noti hac aegritudine colligati, non ante recipiant domum quam lavacro purgaverint corpus. ita etiam alienis oculis visa metuitur labes.
        Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.
    </p>
 
    <p>
        Le 3e paragraphe à voir.
    </p>
 
</div>
</div>
 
 
</body>
</html>

j'ai mis ce test là si ça peut vous aider à tester ce que j'ai essayé :
https://codepen.io/anon/pen/QmOVQP

**psychadelic** · 27/03/2018, 14h20

Je sais pas si c'est faisable en pur css, mais je tenterai le coup en html en plaçant une ancre invisible tout en bas et sur laquelle je mettrai un focus via un tabindex="1" .

mais je ne suis pas certain non plus que ce soit un truc qui marche pareil sur tous les navigateurs...

cas inverse: https://www.developpez.net/forums/d1...rtement-popup/

**NoSmoking** · 28/03/2018, 16h06

Bonjour,
en CSS tu peux déplacer, sous certaines conditions, les éléments dans leur parent mais quoiqu'il arrive cela n'aura aucune influence sur la position de la scrollbar du parent.

Ce que je n'arrive pas à faire est d'afficher directement le bas du contenu où les dernières contributions sont rajoutées régulièrement.

Cela se gère facilement en javascript, dans la fonction d'ajout tu crées un conteneur dans lequel tu places tes informations, tu l'ajoute au conteneur et tu le fais apparître dans ta page via la méthode scrollIntoView().

En gros :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var oDest = document.querySelector('.conteneur');
var oElem = document.createElement('P');
// emplissage du paragraphe
oElem.textContent = '';
// ajout au conteneur
oDest.appendChild(oElem);
// le rend visible
oElem.scrollIntoView();

**mathieu** · 28/03/2018, 18h26

merci pour vos informations, je vais partir sur du JavaScript puisque s'il y a plusieurs zones de ce genre sur une page, le système avec "tabindex" ne fonctionnera que pour le 1er élément.

et quelque chose qui n'a rien à voir avec la question initiale : merci NoSmoking de m'avoir fait découvrir le verbe "emplir", j'utilisais "remplir" par erreur depuis très longtemps.

**NoSmoking** · 28/03/2018, 18h42

merci NoSmoking de m'avoir fait découvrir le verbe "emplir", j'utilisais "remplir" par erreur depuis très longtemps.

j'ai en fait oublié le r car comme presque tout le monde je suis non utilisateur de emplir qui sonne mal !

Afficher le bas d'un élément avec défilement

CSS

Vue hybride

Discussions similaires

Partager

Partager