comment faire trois divs intérieurs de la même hauteur?

J'ai un conteneur div contenu #, qui contient trois div à l'intérieur. Maintenant, comment pourrais-je m'assurer que trois divs à l'intérieur ont la même taille? Bien sûr, j'espère que la taille de chaque div pourrait être élargie en fonction de son contenu. Par exemple: voici ce que j'ai essayécomment faire trois divs intérieurs de la même hauteur?

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
    #content{background-color:#DDDDD;width:100%;overflow:auto;clear:both;height:100%;} 
    #col1{background-color:yellow;width:10%;float:left;height:100%;} 
    #col2{background-color:red;width:30%;float:left;height:100%;} 
    #col3{background-color:#AAAAAA;width:10%;float:left;;height:100%;} 
</style> 
</head> 
<body> 
<div id="content"> 
<div id="col1"> 
    <script language="javascript"> 
for(i=0;i<1000;i++){ 
document.write(i+"<br />"); 
} 
</script> 
</div> 
<div id="col2"> 
     <script language="javascript"> 
for(i=0;i<100;i++){ 
document.write(i+"<br />"); 
} 
</script> 
</div> 
<div id="col3"> 
     <script language="javascript"> 
for(i=0;i<10;i++){ 
document.write(i+"<br />"); 
} 
</script> 
</div>

Source

2009-12-07 WilliamLou

Veuillez formater votre code correctement. Quatre espaces indentants. –

Eh bien, je m'en fous de la taille réelle de l'indentation ... Mais d'accord, au moins nous le donner d'une manière lisible ... – LorenVS

Il pourrait être préférable de poser cette question sur doctype.com (sth like SO, mais à propos de html/js/...) – kubal5003

Je peux me tromper, mais je pense que vous pouvez soit placer les mêmes valeurs pour les hauteurs dans les divs (soit en pour cent ou px) ou vous devrez faire un script (par exemple en JavaScript) qui vérifiera la hauteur du contenu et fixera les autres hauteurs. Je ne pense pas que ce soit faisable avec CSS. Si je me trompe, j'aimerais connaître la réponse: P

Source

2009-12-07 23:47:54 webdreamer

hauteur de pourcentage n'est pas largement pris en charge – pstanton

Tout d'abord: si vous avez un attribut égal sur différents éléments, veuillez respecter le principe DRY (Ne vous répétez pas) et écrivez-le comme ça:

.content div{ 
    border:1px solid #404040 
}

De cette façon, vous n'aurez qu'à le changer en un seul endroit.

Maintenant à propos de votre question. Pour une hauteur dynamique, je préciserais que les div devraient avoir une hauteur de 100%, donc ils remplissent tout l'espace vertical. Cela ne fonctionne pas bien cross-navigateur alors cherchez un hack qui fait cela. Si vous ne voulez pas que le div remplisse le contenu div, placez un autre div dans le contenu div et placez-le autour des 3 divs.

Alors:

<div id="content"> 
    <div class="innerContent"> 
     <div class="1">Lorem Ipsum</div> 
     <div class="2">Lorem Ipsum</div> 
     <div class="3">Lorem Ipsum</div> 
    </div> 
</div>

Source

2009-12-07 23:50:13

comme l'exemple que vous avez fait ici, il suffit d'ajouter la hauteur: 100% à .innerContent fera tous les 3 divs à l'intérieur ont la même hauteur? Je ne pense pas. Bien sûr, dans votre exemple, 3 divs ont exactement le même contenu. Que diriez-vous de différents contenus avec des hauteurs différentes? – WilliamLou

Je sais que la hauteur: 100% ne fonctionne pas, une combinaison d'un ou plusieurs hacks et min-height: 100% devrait. Le div avec le plus de contenu dictera la hauteur de div.innerContent et donc les deux autres divs adapteront leur hauteur à 100% et donc la même chose. –

Pourriez-vous être plus précis sur la "combinaison de hacks"? – WilliamLou

Une technique très utile pour créer divs d'égale hauteur est de l'imiter avec une technique appelée « Colonnes Faux ». C'était une idée suggérée par Dan Cederholm (Vous pouvez read his original article here), et a depuis évolué. Vous pouvez voir un good tutorial here. Si vous en avez besoin dans un environnement de mise en page liquide, you might want to read this article. Fondamentalement, l'idée repose sur NE PAS essayer de forcer les divs à avoir la même hauteur, mais avoir une enveloppe des trois divs avec une image de fond qui simule l'arrière-plan des colonnes. Cette approche fonctionne uniformément parmi tous les navigateurs modernes (ie6 compte même comme moderne dans ce contexte). La partie négative est que vous aurez besoin d'une image d'arrière-plan qui est au moins aussi large que la page est autorisée à développer. c'est-à-dire X pixels de large et 1 px de haut.

Source

2009-12-08 00:11:21 PatrikAkerstrand

Pourquoi est-ce downvoted? +1 ... – jeroen

Je suis régulièrement défoncé par les puristes CSS pour cette suggestion, mais chaque fois que je rencontre un problème comme celui-ci pour lequel – au meilleur de ma connaissance – CSS ne propose tout simplement pas une solution (non, "changer votre design "ne compte pas!) ...

Je recommande d'utiliser une table pour cette partie de votre disposition.

Les tableaux effectuent des tailles verticales égales facilement et correctement sur tous les principaux navigateurs. Je vais continuer à les recommander jusqu'à ce que CSS propose des solutions réalisables pour ces problèmes.

Source

2009-12-08 00:21:14

Je suis un peu fatigué de ce même vieux malentendu. CSS OFFRE UNE SOLUTION, c'est un navigateur de maire qui ne sait pas comment gérer ccc correctement. – jeroen

Si un navigateur majeur ne le gère pas, ce n'est pas une solution. Je sais que ce n'est pas la faute de CSS, mais cela ne résout pas le problème. –

Eh bien, il existe différentes façons de résoudre le problème: fake-le, utilisez css + javascript pour certains navigateurs, utilisez javascript, utilisez des tables, etc. Ce sont toutes des solutions valables; Je commentais sur vos remarques css qui ne sont pas correctes, pas votre solution de table, qui fonctionne très bien. – jeroen

Vous pouvez l'essayer en utilisant css pour les navigateurs modernes (display:table-cell, etc.), cependant, cela ne fonctionnera pas dans IE6 et IE7. Si IE6 et IE7 sont une exigence (je suppose que c'est ...), vous pouvez inclure du javascript juste pour eux en utilisant des instructions conditionnelles et avoir ce javascript définir la hauteur de toutes les colonnes à la plus grande. Pas vraiment joli, mais les pourcentages de IE6 et 7 devraient baisser rapidement de toute façon.Par ailleurs, la solution de Machine (fausses colonnes) est une autre solution qui fonctionne pour beaucoup de conceptions.

Source

2009-12-08 00:37:40 jeroen

Je vous promets que c'est le dernier commentaire que je ferai sur cette question, mais je ne peux pas résister: c'est vraiment incroyable à quel point la foule de no-tables ira pour éviter la solution la plus réalisable. –

Juste en proposant des alternatives qui n'ont pas été mentionnées auparavant, faites votre choix pour une solution de travail ... – jeroen

comment faire trois divs intérieurs de la même hauteur?

Répondre

Questions connexes