28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je viens demander conseil pour réaliser une petite imbrication que je n'arrive pas à faire.

J'ai une div qui fait au minimum 50px de haut (min-height:50px).
Dedans, il peut y avoir une seule ligne comme plusieurs (totalement variable).

Tant que la hauteur du contenu ne dépasse pas les 200px, la div doit s'agrandir normalement.
Par contre je souhaite qu'au delà de 200px de hauteur un ascenseur vertical (et uniquement vertical, pas horizontal) apparaisse.

Mon soucis c'est que si je mets un overflow-y:auto, sans préciser de hauteur (height), l'ascenseur n'apparait jamais.
Et si je mets une hauteur, la div prends toute cette hauteur même si il n'y a qu'une ligne dans ma div.

En résumé, j'aimerai une div qui, jusqu'à 200px de haut affiche son contenu sans ascenseur mais au delà qu'un ascenseur apparaisse. Et si il n'y qu'une ligne, la div ne fasse pas plus de 50px (sans ascenseur bien sur).

Ou autrement formulé,
Comment faire pour respecter une petite hauteur si peu de contenu, agrandissable jusqu'à 200px de hauteur en cas de contenu moyen et qu'au delà, dans le cas d'un grand contenu, un ascenseur vertical apparaisse ?

Merci d'avance Smiley biggrin
bonsoir
Est ce que votre width reste fixe ?
La taille du text est fixed?
Modifié par 75lionel (09 Feb 2015 - 00:24)
Salut,

je pense que tu devrais pouvoir t'en sortir avec du javascript, en modifiant tes css selon la hauteur de ton bloc.
Bonjour,

Merci pour vos réponses.

@75Lionel :
En l’occurrence, oui la width est fixe. Pour la taille du texte, je ne comprends pas bien. Le contenu est variable et sous la forme d'un tableau..

@Pedrothelion
J'avais repéré cette piste en javascript.
Quelque chose comme ça :
var doc = document.getElementById('cont');
H = doc.offsetHeight;

Mais je n'ai pas encore testé cette solution.

Cependant je me demandais si il n'y avait pas une solution "pure" css...