Geckozone

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.

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

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

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.

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 ?

line-height: 1.2em ?

ah oui, c'est pas mal ça

Geckozone

[ok] positionnement css

[ok] positionnement css