Modification des hauteurs des conteneurs div en utilisant des pourcentages en CSS pour refléter le contenu

J'ai le code suivant qui imite mon problème. Je veux styler les éléments dans la div "Container" en utilisant des pourcentages. Par conséquent, je dois définir la div "Container" à hauteur de 100% (ou autre valeur) pour que cela fonctionne. Le problème se pose lorsque je veux que le div "Container" change de hauteur pour refléter le contenu. Dans le cas ci-dessous, je voudrais que la hauteur soit de 200% (dans ce cas, cela fonctionnerait car je connais le contenu de "Container" mais j'ai une grille de données dans le cas réel avec un nombre variable de lignes). Si je règle la hauteur sur auto alors je ne peux pas changer les éléments enfants en utilisant des pourcentages. Y at-il un moyen de contourner ce problème ou suis-je réglé avec des conteneurs à hauteur fixe?Modification des hauteurs des conteneurs div en utilisant des pourcentages en CSS pour refléter le contenu

Merci,

Rich.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html style="height:100%"> 
<body style="height:100%"> 
<form style="height:100%"> 
<div id="Container" style="border:solid 5px;min-height:100%;height:100%"> 
<div style="height:100%; color:red"> TEST </div> 
<div style="height:10%; color:red"> TEST </div> 
<div style="height:10%; color:red"> TEST </div> 
<div style="height:10%; color:red"> TEST </div> 
<div style="height:10%; color:red"> TEST </div> 
<div style="height:10%; color:red"> TEST </div> 
<div style="height:10%; color:red"> TEST </div> 
<div style="height:10%; color:red"> TEST </div> 
<div style="height:10%; color:red"> TEST </div> 
<div style="height:10%; color:red"> TEST </div> 
<div style="height:10%; color:red"> TEST </div> 
</div> 
</form> 
</body> 
</html>

Source

2009-10-25 Richard Knight

De votre description, cela ressemble à des données tabulaires. Utilisez une table, qui s'adaptera à son contenu sans aucun effort de votre part.

Source

2009-10-25 19:01:32 Ray

J'aurais dû dire que je n'utilise pas de tables - c'est une solution CSS pure. Merci pour la réponse si. –

C'est l'un de ces endroits où je n'insiste pas sur les mises en page basées sur CSS. Une table fera ce que vous voulez, gratuitement, sans faire d'histoires. Pour le faire avec CSS, vous devez lutter contre le changement de taille dynamique et les différences de navigateur, rechercher des idées sur le web, publier des messages sur le site et espérer des réponses. Et puis, si/quand vous le faites fonctionner, ça coûte beaucoup plus cher, et ça ressemble à une table. – Ray

Si vous placez une div "spacer" en bas de la div Container, la div du conteneur doit se dilater et se contracter comme le fait le contenu. @Ray: si la conception Web devait être basée sur des tables, toutes les autres choses n'auraient pas été créées. Il y a pas mal de choses que vous n'obtenez pas avec la conception basée sur des tables qui sont importantes. Deux choses qui me viennent à l'esprit sont le référencement optimal et la conformité à la section 508.

Source

2009-10-26 18:06:10 tahdhaze09

Pourriez-vous expliquer plus en profondeur en ce qui concerne la div spacer? Comme je l'ai pour le moment, seule la première div "TEST" s'emboîte dans le conteneur (car elle est 100% haute) et le reste s'écoule en dessous. En d'autres termes, il obéit à la hauteur et non à la propriété min-height du conteneur. Si je sors la propriété height du conteneur, les divs "TEST" n'ont pas l'espacement de hauteur correct car ils ne peuvent pas calculer leur hauteur par rapport au div parent (conteneur) parce que je l'ai enlevé! Merci encore Rich. –

Qui devrait lire ne peut pas calculer leur hauteur par rapport à la hauteur de la div parent (conteneur) parce que je l'ai supprimé! –

Modification des hauteurs des conteneurs div en utilisant des pourcentages en CSS pour refléter le contenu

Répondre

Questions connexes