Hauteur du contenu d'un DIV ayant une taille fixée contenant des div absolutes

Bonjour,

Je vous explique mon problème. J'ai un div en absolute qui possède une hauteur fixe. Je désire connaitre la hauteur du contenu de ce div sachant que ce contenu est composé de div en absolute.

Voici un cas théorique :

<div id='div_1' style='position:absolute; height:150px; width:150px; overflow:absolute;'>
<div id='div_2' style='position:absolute; height:300px; width:150px;'></div>
<div id='div_3' style='position:absolute; height:300px; width:150px;'></div>
<div id='div_4' style='position:absolute; height:300px; width:150px;'></div>
</div>

<div id='div_sizer' style='display:hidden; position:relative;'></div>


Je n'ai pas mis les top: et Left: mais c'est éléments div_2 à 4 peuvent, dans ce cas théorique, être positionné n'importe ou même se chevauché.


J'ai tout d'abors essayé de copier le contenu du div_1 dans un div caché sans taille fixées mais comme le contenu du div_1 est en absolute, la taille de ce div caché est de zero.

Je n'ai pas eu le temps de faire d'autres tests mais j'ai l'intention en utilisant Prototype, d'avant de mesurer la taille de passer en revue tous les divs au niveau -0 (les enfants directes) et en utilisant Prototype de les "relativisés". Je testerai ça prochainement mais pour gagner du temps, je vous ce problème ?

Une autre solution serait de passer en revue tous les div (enfant) dans le contenu et de prendre celui qui à "position dans la page + hauteur de ce div" la plus haute et de faire ensuite "position dans la page + hauteur de ce div" - "position du div_1"

Mais bon ça me semble farfelu, y a pas une autre solution ?

Comment mesure la taille du contenu d'un div absolute à taille fixe contenant des div absolute. :aie::yaisse2:

Code:

---

1 2	overflow:absolute; display:hidden;

---

me semblent un peu 'exotiques' !

Sinon, ne mets pas de taille fixe à la div conteneur et calcule se hauteur avec

Code:

---

document.getElementById('ta_div').offsetHeight;

---

Oui fallait comprendre overflow:hidden;


Et document.getElementById('ta_div').offsetHeight; ne fonctionne pas. J'ai tout de même testé mais comme dit dans l'énoncé du problème, div_1 contient des div en absolute donc si j'enlève la taille de div_1, la taille de div_1 sera égale à 0. C'est là le problème ;)


Je viens de tester un truc qui fonctionne...

Avec un $$('#div_1 div').each({}) qui me permet de boucler sur tous les élements div dans mon div_1.

Je prend leur position y + leur hauteur et cette boucle me renvoie le max de cette valeur que je compare à la position de div_1. Ca me retourne la taille du contenu. :yaisse2: Mais.... dans mon exemple j'ai mis pour le contenus 3 div mais ça peut être beaucoup, beaucoup plus. Donc la fonction n'est pas très performante. Il y a peut être un autre moyen...


Je vais essayer de remplacer $$('#div_1 div').each({}) par $$('#div_1 > div').each({}) et $$('#div_1 > div >div').each({}) En supposant que je n'ai pas besoin d'aller plus bas. Je vais voir les perf que cela donne

Je ne suis pas parvenu à optimiser de manière générique.


J'utilise toujours $$('#div_1 div').each({}) que j'ai changé en $('div_1').descendant({}) comme ça j'ai tout les éléments. Mais évidemment comme pour chaque élement il faut obtenir la taille... ça prend du temps.


Donc j'ai dans mon code placé une div avec un id bien précis dans le dernière élément de la boite dont je désire connaitre la taille. Avec hidden et bottom:0px; Et ensuite côté javascript je fait la différent entre la position sur la page de cet élément et le conteneur. C'est beaucoup plus performant évidemment mais hélas ce n'est pas générique. Donc ma fonction qui calcul la taille fait d'abord une première boucle sur le dernier élement. Et si il n'y a pas de dernier élément fait la première boucle non performante.

Quand je parle de peu performant, dans mon test, la boite contient 400 éléments et ça prend 0.2 sec. Avec la boucle optimisée c'est évidemment quasi instantané.