28172 sujets

CSS et mise en forme, CSS3

Scrollbar et aligner du texte en bas [résolu]

Bonjour,

Je souhaite aligner du texte en bas d'un div dont la hauteur est à 100% et avoir une scrollbar dans le cas où mon texte est plus grand que mon div. Pour cela, j'ai mis overflow-y: auto à mon div et j'obtiens comme prévu une belle scrollbar.

Ensuite pour aligner le texte en bas, j'ai positionné mon div en relatif et j'ai ajouté autour de mon texte un div en position absolu avec bottom: 0. Le texte est bien aligné en bas, mais la scrollbar a disparu.

J'ai beau réfléchir, je ne vois pas pourquoi ma barre de défilement se défile...

Voici un code d'exemple :

<style>
#conteneur {
	position: relative;
	height: 100%; 
	background: #FF0000;
	overflow-y: auto;
}

#mondiv {
	background: #00FF00;
}
</style>
<div style="height: 50px;">
	<div id="conteneur">
		<div id="mondiv">Quand mondiv n'est pas trop grand, ca marche, pas de scrollbar comme voulu</div>
	</div>
</div>
<br>
<div style="height: 50px;">
	<div id="conteneur">
		<div id="mondiv">Quand mondiv est trop grand,<br> pas de scrollbar,<br> malgre le overflow-y: auto</div>
	</div>
</div>

Modifié par cristalboy (14 Aug 2010 - 23:24)
Salut cristalboy

Il n'y a pas de overflow-y : c'est overflow:auto.
C'est à toi d'ajuster ton texte pour que le scroll horizontale n'embarque jamais.
Il embarquera verticalement au besoin.

Tu as deux id ayant la même valeur (id="mondiv"). Tu ne dois pas.

++
overflow-y existe bel et bien : http://www.w3.org/TR/css3-box/#overflow-y

Oui tu as raison, pas 2 fois le même id, je suis allé un peu vite en faisant mon exemple. Il suffit de remplacer les # par des . et les id par des classe.

<style> 
.conteneur { 
	position: relative; 
	height: 100%;  
	background: #FF0000; 
	overflow-y: auto; 
} 
 
.mondiv {
	position: absolute;
	bottom: 0;
	background: #00FF00; 
} 
</style> 
<div style="height: 50px;"> 
	<div class="conteneur"> 
		<div class="mondiv">Quand mondiv n'est pas trop grand, ca marche, pas de scrollbar comme voulu</div> 
	</div> 
</div> 
<br> 
<div style="height: 50px;"> 
	<div class="conteneur"> 
		<div class="mondiv">Quand mondiv est trop grand,<br> pas de scrollbar,<br> malgre le overflow-y: auto</div> 
	</div> 
</div>


Toujours pas de scrollbar Smiley ohwell
Modifié par cristalboy (14 Aug 2010 - 22:36)
Salut,

cristalboy a écrit :
overflow-y existe bel et bien : http://www.w3.org/TR/css3-box/#overflow-y
juste pour préciser la propriété overflow-y n'était à l'origine implémentée que par Internet Explorer et a été reprise dans CSS3 (comme ton lien l'indique). Elle devrait effectivement être reconnue dans tous les navigateurs modernes.
En lisant la doc, j'ai trouvé un exemple qui est similaire au mien :

documentation a écrit :
Consider this case where an absolutely positioned element is mixed with an overflow parent. Style sheet:

container { position: relative; border: solid; }
scroller { overflow: scroll; height: 5em; margin: 5em; }
satellite { position: absolute; top: 0; }
body { height: 10em; }

Document fragment:

<container>
<scroller>
<satellite/>
<body/>
</scroller>
</container>

In this example, the “scroller” element will not scroll the “satellite” element, because the latter's containing block is outside the element whose overflow is being clipped and scrolled


Donc si je comprends bien, le fait de positionner mes div les fond sortir du flux et donc le navigateur ne considère pas "mondiv" comme dépassant du "conteneur" ?

Existe-t'il une autre manière que le positionnement absolue pour aligner un texte en bas de page ?
Modifié par cristalboy (14 Aug 2010 - 23:06)
Je ne suis pas sûr d'avoir compris ce que tu voulais faire. Quoi qu'il en soit le positionnement absolu sort effectivement l'élément du flux et donc un overflow sur le bloc conteneur ne fonctionnera pas.

Peut-être une piste :
.conteneur {  
    position: relative;  
    height: 100%;   
    background: #f00;  
}  
  
.mondiv { 
    position: absolute; 
    bottom: 0;
	left: 0;
    overflow: auto;
	max-height: 50px;
	width: 100%;
    background: #0f0;
}
En fait, mon exemple n'était pas totalement pertinent car je ne le connais pas le div parent qui fait 50 pixel. Mais ta solution marche très bien en mettant max-height: 100% !

Merci beaucoup Heyoan =)
Modifié par cristalboy (14 Aug 2010 - 23:24)
Sujet clos
Aller à