Bonjour,
j'ai un div qui contient l'avatar, pseudo, date et commentaire je les ai tous placés en "absolute", mais le problème est que la div parent ne prend pas en compte la hauteur des div qu'elle contient et je ne peut pas lui donner une hauteur fixe vue que la taille du commentaire varie selon chaque utilisateur, donc comment faire pour que la hauteur de la div parent soit équivalente a la somme des div qu'elle contient en sachant que ces derniers sont positionnés en "absolute" et la div parent en "relative" ? On dirait un problème de math non ^^
En tout merci pour vos éventuelles réponses
cordialement

7 réponses


heaven-khn
Réponse acceptée

Ton probleme n'est pas si dur a resoudre et y'a ni des math ni .....
Donc d'apres ce que j'ai compris t'as un div container qui est on relative et des div fils qui sont
on absolue. Donc ce que je te conseille de faure est de recuperer le height du commentaire et
l'inserer dans le height du div en relative bon je veux te donner un exemple "un exemple vaut mieux
que ......"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="jquery.js"></script>
<style>

container

{position:relative;
width:300px;
background:#0C9;
}

.first
{position:absolute;
}
</style>
<script type="text/javascript" >
$(function(){

var height = $(".first").height();
$("#container").css("height", height);
});

</script>

</head>

<body>

<div id="container">
<div class="first">

<p>Consectetur adipisicing elit, quis nostrud exercitation excepteur sint occaecat. Ullamco laboris nisi sunt in culpa qui officia deserunt. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat.</p>
<p>Consectetur adipisicing elit, quis nostrud exercitation excepteur sint occaecat. Ullamco laboris nisi sunt in culpa qui officia deserunt. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat.</p>
<p>Consectetur adipisicing elit, quis nostrud exercitation excepteur sint occaecat. Ullamco laboris nisi sunt in culpa qui officia deserunt. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat.</p>
<p>Consectetur adipisicing elit, quis nostrud exercitation excepteur sint occaecat. Ullamco laboris nisi sunt in culpa qui officia deserunt. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat.</p>
<p>Consectetur adipisicing elit, quis nostrud exercitation excepteur sint occaecat. Ullamco laboris nisi sunt in culpa qui officia deserunt. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat.</p>
<p>Consectetur adipisicing elit, quis nostrud exercitation excepteur sint occaecat. Ullamco laboris nisi sunt in culpa qui officia deserunt. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat.</p>
</div>

</div>
</body>
</html>

change comme tu veux le contenu du .first tu verra que la div container prendra la hauteur du
.first

Tu peux récupéré la hauteur de chaque div en JS puis après grâce à la fonction : css de JS tu positionne tes éléments ... après faut faire un peu de maths.

Tu peux nous copier ton code HTML stp ?
Pourquoi as tu besoin de mettre tous ça en position absolute ?

http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html

Les bases risquent de t'aider énormément, quand on sait plus faire, faut reprendre à 0 ;)

Un schéma serait le bienvenu aussi :)

http://www.siteduzero.com/tutoriel-3-13566-mise-en-boite-partie-2-2.html#ss\_part\_3

La site du zero explique bien, j'ai pas vue de petit schéma mais c'est plus clair que alsacreation ;). L'absolute position l'élément (la div en absolute) par rapport à toute la page. Donc tu tu veux lui donner une position précise e n'est pas ce qui a de mieux à faire, il y a surement un meilleur moyen. Enfin je pense.

wYm
Auteur

Voici un screenshot