18041 sujets

Questions générales et questions de débutants

[résolu] 2 blocs qui doivent s'adapter à la height du contener?

salut !

Voilà : le height des div enfants(.bloc1 et .bloc2 ) s'adapte correctement au div parent(#contener), seulement si l'un des deux pousse le parent ( c'est l'effet voulu) l'autre frêre ne s'adapte plus à la nouvelle dimension du parent.
Pour pallier à ce problème et avoir les 2 enfants à 100% du bloc parent, il me faut alors donner une taille fixe (au pifomètre) au contener dans la limite supérieure du plus grand enfant...
Aie... j'espère que c'est clair !

Donc ma question est:
Comment avoir plusieurs blocs qui s'adaptent à 100% du contener dans lequel ils se trouvent et ce, quel que soit le volume de leur contenu.

voici un test en ligne que l'on voir ici

et pour "Néo", Le code est le suivant:

<style type="text/css">
html, body{
height:100%;
}
#contener{
margin:auto;
border:1px solid red;
width:400px;
min-height:300px;
}
.bloc1, .bloc2{
font:normal 20px Arial, Helvetica, sans-serif;
margin-left:5px;
float:left;
width:150px;
height:100%;
}
.bloc1{
border:1px solid blue;
}
.bloc2{
background-color:yellow;
border:1px solid green;
}
#fin_bloc{
width:100%;
border:1px solid black;
height:1px;
clear:both;
}
</style>
</head>

<body>
<div id="contener">
<div class="bloc1">Le contenu de ce bloc pousse les limites du contener...<br />Le contenu de ce bloc pousse les limites du contener...<br />Le contenu de ce bloc pousse les limites du contener...<br />Le contenu de ce bloc pousse les limites du contener...<br />Le contenu de ce bloc pousse les limites du contener...<br />Le contenu de ce bloc pousse les limites du contener...
</div>
<div class="bloc2">...mais ce bloc ne s'adapte pas à la nouvelle taille du contener</div>
<div id="fin_bloc"></div>
</div>
</body>

Merci à vous.
Modifié par lefelinherbivore (02 Mar 2007 - 13:11)
Bon, j'ai mis en ligne un nouvel exemple ici
Bon, là ça fonctionne... grace à des cellules et à un tableau... mais je voulais eviter ça.
Si j'ai bien compris, il n'y a pas moyen de faire sans?
Pouvez-vous confirmer?

Merci.
lefelinherbivore a écrit :
Bon, là ça fonctionne... grace à des cellules et à un tableau... mais je voulais eviter ça.
Si j'ai bien compris, il n'y a pas moyen de faire sans?

On ne peut pas faire exactement la même chose sans tableau ou affichage de type tableau (display: table-cell, non implémenté par IE).

Mais suivant les besoins graphiques on n'aura pas nécessairement besoin de deux blocs de contenu de même hauteur. S'il s'agit juste de donner un effet visuel de colonnes de même hauteur, on peut utiliser la technique des colonnes factices (des centaines de messages sur ce forum qui en parlent, deux ou trois tutoriels sur Alsacréations qui l'abordent, plus plein de ressources en ligne... je ne détaille pas).

Si tu veux centrer verticalement le contenu d'une des deux colonnes, par contre, on restera sur la solution tableau (rappel : les tableaux, ça n'est pas le mal).
oui, je sais bien que les tableaux ne sentent pas le gaz Smiley cligne
Mais bon, autant se servir d'une sémentique web la plus proche possible de la structure souhaitée. Là, on s'en écarte un peu, non?
Puis sans feuille de style complémentaire, cette structure ne passe pas sur les pocket pc, il me semble.
J'avoue ne pas avoir trop compris tes explications, si ce n'est qu'il me faut jeter un coup d'oeil du coté des colonnes qui ne sont pas vraies...
Je ne sais pas trop si ça correspond aux exemples explicités ci dessus...
Ah, effectivement, le problème est vraiment récurrent...
la solution serait donc, soit d'envisager une structure avec table, soit de bidouiller avec des tableaux factices qui ne sont en fait qu'une image d'arrière plan appliquée au contener global... toutes les explications sur le site de pompage
Que des solutions de secours en somme, à moi de faire mon choix entre l'une ou l'autre solution Smiley cligne

Merci Florent et Benjamin de m'avoir indiqué la piste à suivre.
Modifié par lefelinherbivore (02 Mar 2007 - 13:17)
Sujet clos
Aller à