Enfant DIV changer la hauteur pour correspondre à l'autre enfant DIV

Question

J'ai parcouru Internet à la recherche d'une solution à cela et je suis sûr que c'est juste sous mon nez. Quelqu'un peut-il m'aider?

J'ai un parent div avec deux enfants. Chaque enfant a des largeurs statiques et j'ai besoin que chacun change sa taille pour correspondre à l'autre en fonction du contenu. En d'autres termes, si "enfant-div-a" est plus grand que "enfant-div-b, alors" enfant-div-b "doit automatiquement mettre à l'échelle la même hauteur de" enfant-div-a ". pour obtenir le parent à l'échelle de l'enfant le plus grand, mais pas l'autre enfant.Je n'arrive pas à obtenir la div (a) de gauche pour toujours être la même hauteur que le div/right/content (b) Vous penseriez que ce serait très simple, ou peut-être que je suis un idiot.

Merci à l'avance pour toute aide.

Joshua

---

Mon gros problème a été résolu.

La première réponse que j'ai vu de japanPro contenait un lien vers le blog d'Ed Elliot. Cela contenait des informations sur les fausses colonnes. J'ai un concept assez simple que je ne peux pas croire que je n'ai pas vu. Tout était de la fumée et des miroirs, mais j'étais trop concentré sur l'illusion pour voir comment l'astuce pouvait être faite (si cela en faisait). Voici le CSS que j'ai trouvé:

#child-div-container{ 
    width: 800px; 
    position: relative; 
    overflow: hidden; 
    background-image: url(../../../images/faux_column_bkground.gif); 
    background-repeat: repeat-y; 
    } 

#child-div-a{ 
    float: left; 
    width: 125px; 
    } 

#child-div-b{ 
    float: left; 
    width: auto; 
    height: 100%; 
    margin-left: 5px; 
    } 

Merci encore à tous ceux qui ont répondu à mes besoins. Tout le monde a donné des informations viables. J'espère seulement pouvoir développer mes compétences et mes connaissances au point de donner des conseils au lieu de le demander.

Joshua

Answer 1

il y a deux façons de faire

• javascript chemin, l'utilisation jquery égale hauteur

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

• autre moyen utilise css

http://www.ejeliot.com/blog/61

Answer 2

Ceci est un problème très fréquent en html/css. Il y a des astuces pour le faire en Javascript, mais je ne sais pas si c'est ce que vous cherchez.

Deux solutions pour ce problème qui n'utilisent pas javascript:

Faux Columns - Ne fonctionne que si l'arrière-plan de la colonne qui doit étirer n'a qu'une seule couleur de fond ou un motif répétitif (car il utilise une image ou frontière pour simuler une colonne). Cela pourrait ne pas fonctionner aussi bien mais quand vous ne pouvez pas prédire avec div sera plus grand.

Equal Height Columns - Astuce CSS que je n'ai pas encore testé.

Answer 3

Je ne connais pas une bonne réponse basée sur CSS pour vous. Mais vous pouvez accomplir cela facilement avec jQuery.

Supposons que vous ayez le balisage suivant

<div id="parent"> 
    <div>My content</div> 
    <div>Other div with content</div> 
</div> 

Voici un jQuery plugin qui vous permet de faire cela aussi simplement que:

$("#parent div").equalHeights(); 

Answer 4

Voici une méthode jquery comme je l'ai trouvé sur CSS Tricks une ressource EXCELLENT!

var maxHauteur = 0;

$("div").each(function(){ 
    if ($(this).height() > maxHeight) { maxHeight = 

$ (this) .height(); } });

$("div").height(maxHeight);