28172 sujets

CSS et mise en forme, CSS3

Ajustement contenu/contenant variables avec fonction overflow

Bonjour à tous

Voilà j'ai un gros soucis, je suis bloquée voilà plusieurs jours que je cherche une solution et je n'ai pas pu trouver.
J'ai fait un CSS et une page html test simples, parceque je voulais tester uniquement la chose qui me posait problème, et je voulais être sûre que rien n'allait parasiter ce que je faisais.
Je suis toujours bloquée.
Je vous explique.
j'ai une div, qui contient du texte entre autres, et qui doit contenir une autre div, et à cette dernière j'ai appliqué une fonction "overflow" pour que le navigateur applique une scrollbar verticale et que tout ce que j'écris dans le cadre "petit" ne dépasse pas de mon cadre d'origine, le cadre "grand".
Problème, si je définis le height à 100%, un décalage se forme en fonction du degré de remplissage de la div contenante.

Voilà mon code, pour vous imager les choses :

#grand{ width:200px;
height: 200px;
background-color: rgb(236, 236, 236);
	}	
	
#petit { width:100px;
height:100%;
background-color: rgb(247, 247, 247);
overflow: auto;

}


<html>
<head>
<link href="new4.css" type="text/css" rel="stylesheet" />
</head>
<body>

<div id="grand"> grand grand grand grand grand grand grand grand grand grand grand grand grand grand grand grand 
<div id="petit">
petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit petit 
</div>
</div>

</body>

</html>


Quelle valeur je peux mettre à la place de 100% pour que ça fonctionne ?

Je sais même pas si c'est possible en fait...

Je pensais qu'en mettant 100%, il prendrait 100% de ce qu'il lui restait en soustrayant tout ce que j'aurais ajouté au dessus, mais cela ne marche pas.
Vu que la quantité de texte dans la div "grand" sera variable, comment faire pour que le cadre "petit" ne dépasse pas du cadre "grand" quelle que soit la quantité de texte que j'aurai à y écrire ?

Je sais pas si je suis assez claire je dois avouer que j'ai le cerveau embrouillé à force de réfléchir.

Merci par avance à ceux qui sauront m'aider. Smiley confused
Modifié par Florent V. (05 Nov 2010 - 21:43)
Salut,
En ajoutant overflow: hidden sur le grand, ce dernier devrait s'adapter à la longueur de ton texte.
Bonjour

Est-ce que le bloc #grand aura une hauteur fixe ?
Si oui, quel comportement espères tu avoir lorsque le texte du bloc #grand atteint ou dépasse la hauteur de ce bloc ? Que devient ton bloc #petit si tout l'espace du bloc #grand est occupé par le texte au dessus ?
@ ellm :
- oui la hauteur du bloc "grand" est fixe et cela ne changera jamais Smiley smile
- le texte que j'aurai à ajouter dans le bloc "grand" à l'avenir ne remplira jamais tout le bloc, en général sur mon véritable site, dans le bloc grand je mets un titre, et un petit bloc avec des explications (ce qui n'aura jamais la meme hauteur et peut être amené à changer), et en dessous, je mets mon bloc "petit" avec la fonction overflow, comme ça, même si il y a beaucoup de texte, une barre de défilement verticale apparait automatiquement.
Donc en général, ce que j'ai à écrire dans le bloc "grand" n'est jamais très long, seulement, ce ne sera jamais la même chose, du coup je ne peux pas fixer la hauteur.

@ hchtot :
je vais essayer ce que tu suggères, je viendrai te dire si cela fonctionne.

--> je viens d'essayer. Cela fonctionne, mais uniquement à la vue, si je peux dire ainsi.
On dirait que le bloc ne dépasse plus, mais on voit que la barre de défilement continue à se prolonger, elle est cachée c'est tout.
Je sais pas si j'explique bien ^^ Smiley lol
C'était une bonne idée mais ça ne suffira pas visiblement.
C'est dommage j'aurais vraiment aimé que ce soit aussi simple Smiley smile

Merci à tous les deux pour votre aide.
Modifié par Teruteru (13 Oct 2010 - 18:32)
Avec un height:100% et un parent dont la hauteur est fixe (en pixels), ton bloc #petit va prendre comme hauteur... 200px, soit la hauteur du parent.

Je ne vois pas trop quelle solution existe en CSS. Utiliser display:table-cell (ou un tableau de mise en page) ne permet pas de faire ce que tu demandes, de mémoire. Ou alors en bidouillant un peu mais je n'y crois pas trop. Il me semble qu'avec les propriétés du module Flexible Box Layout de CSS3 on doit pouvoir faire quelque chose qui correspond à ce que tu demandes, mais ce n'est implémenté que dans Gecko (Firefox) et Webkit (Safari, Chrome).

Je te conseillerais plutôt de choisir une autre solution de mise en page. Il y a deux trucs très pénible sur le web:
- les éléments dont la hauteur est figée (et pas extensible en fonction du contenu);
- les barres de défilement à l'intérieur des blocs.
Donc si on peut éviter...
Modifié par Florent V. (05 Nov 2010 - 21:51)
Sujet clos
Aller à