[ok] positionnement css

[arno.]

Bonjour, j'essaye d'avoir une liste de lignes dans un div en position fixed. Comme je ne connais pas à l'avance le nombre de lignes, je veux que la taille du conteneur s'adapte jusqu'à une certaine limite, donc je mets une taille maxi. Il s'agit du <div> en haut à gauche. Ça marche bien.

Code : Tout sélectionner

<div id="div" style="position: fixed; left: 0px; top: 0px; width: 150px; max-height: 40px; border: 1px solid black; overflow: hidden">
    <pre style="margin: 0">item 1</pre>
    <pre style="margin: 0">item 2</pre>
    <pre style="margin: 0">item 3</pre>
    <pre style="margin: 0">item 4</pre>
</div>

Maintenant, ce que je veux, c'est le même comportement, mais avec les lignes alignés en bas. C'est à dire que si le taille maxi est dépassée, on voit les lignes du bas, mais pas celles du haut. J'ai donc essayé de mettre un <div> interne avec position = absolute bottom = 0. Ça ne fonctionne pas, la taille de mon bloc externe vaut 0, le truc est tout à plat

Code : Tout sélectionner

<div id="div" style="position: fixed; right: 50%; top: 0px; width: 150px; max-height: 40px; border: 1px solid black; overflow: hidden">
<div style="position: absolute; bottom: 0px">
    <pre style="margin: 0">item 1</pre>
    <pre style="margin: 0">item 2</pre>
    <pre style="margin: 0">item 3</pre>
    <pre style="margin: 0">item 4</pre>
    </div>
</div>

Pour le voir réapparaitre, il faut que je mette la taille "en dur" dans le div externe, mais du coup, ça la taille ne s'adapte plus quand il y a peu de lignes:

Code : Tout sélectionner

<div id="div" style="position: fixed; right: 0px; top: 0px; width: 150px; height: 40px; max-height: 40px; border: 1px solid black; overflow: hidden">
<div style="position: absolute; bottom: 0px">
    <pre style="margin: 0">item 1</pre>
    <pre style="margin: 0">item 2</pre>
    <pre style="margin: 0">item 3</pre>
    <pre style="margin: 0">item 4</pre>
    </div>
</div>

Est-ce que vous avez des idées ?
voila ce que ces 3 exemples donnent dans une page web:
http://www.fdn.fr/~arenevier/tmp/position.html

merci d'avance.

[calimo]

Pour le deuxième cas, es-tu obligé d'ajouter un div supplémentaire ? Comme tu le sors du flux (position absolue), le div parent n'a évidemment plus aucune hauteur. Je n'aurais utilisé qu'un seul div

[arno.]

Merci pour ta réponse.
Mais le problème, c'est que si je veux quand même que cette zone soit placée en haut à droite de la page. Donc, je suis obligé d'avoir le premier <div> pour le mettre en position fixed

[martin]

la seule solution crade que j'ai trouvée pour l'instant :

Code : Tout sélectionner

<div style="border: 1px solid black; overflow: hidden; position: fixed; right: 50%; top: 0px; width: 150px; max-height: 40px;" id="div">
<div style="position: absolute; bottom: 0px;">
    <pre style="margin: 0pt;">item 1</pre>
    <pre style="margin: 0pt;">item 2</pre>
    <pre style="margin: 0pt;">item 3</pre>
    <pre style="margin: 0pt;">item 4</pre>
    </div>
<div style="height: 4em; max-height: 40px;">&nbsp;</div>
</div>

Soit rajouter un div vide qui force l'agrandissement du conteneur, avec le même max-height que le conteneur fixed, et une hauteur correspondant au contenu à afficher. Je suppose que tu génère le contenu à afficher, tu peux donc générer la bonne valeur de ce div vide.

C'est pas joli, mais çà semble fonctionner en essayant avec firebug.

[arno. sans ses cookies]

Bonne idée, ça marche à peu près si je définis la taille dynamiquement. Par exemple:

Code : Tout sélectionner

<div id="div" style="position: fixed; right: 50%; top: 0px; width: 150px; height: 4.8em; max-height: 40px; border: 1px solid black; overflow: hidden">
<div style="position: absolute; bottom: 0px">
    <pre style="margin: 0">item 1</pre>
    <pre style="margin: 0">item 2</pre>
    <pre style="margin: 0">item 3</pre>
    <pre style="margin: 0">item 4</pre>
    </div>
</div>

Par contre, il me faut environ 1.2em par ligne.

Code : Tout sélectionner

<div id="div" style="position: fixed; right: 50%; top: 0px; width: 150px; height: 2.4em; max-height: 40px; border: 1px solid black; overflow: hidden">
<div style="position: absolute; bottom: 0px">
    <pre style="margin: 0">item 1</pre>
    <pre style="margin: 0">item 2</pre>
    </div>
</div>

Comment est-ce que je peux faire pour calculer la taille exacte, ie pour savoir combien de 1em il y a dans une ligne ?

[Benoit]

line-height: 1.2em ?

[arno.]

ah oui, c'est pas mal ça