Comment assurez-vous que deux divs ont la même hauteur?

Disons que j'ai 2 divs dans un wrapper de l'autre côté.

<div id="wrapper">
    <div id="primary"></div>
    <div id="secondary"></div>
</div>

#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}

Comment puis-je m'assurer div secondaire toujours a la même hauteur que le div principal

Je suppose que vous voulez dire, sans préciser la hauteur? Vous aurez besoin de JavaScript pour cela, sauf si vous pouvez utiliser flex-box.
Voir ma réponse ci-dessous pour une simple mais cool css truc

OriginalL'auteur Jack Pilowsky | 2013-04-29

css html

0

Malheureusement, il n'existe pas de méthode parfaite pour le faire sans l'aide de Javascript, de façon réaliste, les deux divs ne sais rien à propos de l'un à l'autre.

Quelles sont vos options dépend exactement ce que vous cherchez à atteindre visuellement.

Une rapide recherche sur google a apporté ce qui semble assez prometteur: http://www.vanseodesign.com/css/equal-height-columns/

Si vous pouvez vous concentrer sur le plus moderne des navigateurs, vous pouvez être en mesure de s'en tirer avec l'aide de flexbox. Voir ce post pour les exemples etc: http://css-tricks.com/fluid-width-equal-height-columns/

La bonne réponse devrait vraiment contenir la réponse, pas les liens pour la réponse. Des liens peuvent devenir des morts à un moment donné et ils fournissent une charge supplémentaire pour le lecteur.

OriginalL'auteur BePatient
4

essayez d'utiliser javascript prenant la valeur de la primaire div une affectation à la deuxième div.

L'autre façon est d'essayer de l'utiliser pixel px ou em, cette façon de vous assurer de toujours a la même hauteur des deux

OriginalL'auteur Gianfranco Lemmo

Il y a une super astuce sur la façon de le faire.

jsFiddle Démo

Tout d'abord, vous appliquez padding-bottom: 100%; de chaque côté-à-côte div.

Ensuite, vous appliquez margin-bottom: -100%; de chaque côté-à-côte div. Note le -

Enfin, vous ajoutez overflow:hidden; à la div, ils sont à l'intérieur.

Presto! Le vrai bonheur est le vôtre.

HTML:

<div id="wrapper">
    <div id="primary">Lorem ipsum dolor set amet. </div>
    <div id="secondary">En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. </div>
</div>

CSS:

#wrapper  {overflow:hidden;}
#primary  {width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;}
#secondary{width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;}

Références:

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

OriginalL'auteur gibberish

2

Si vous spécifiez la valeur de la hauteur de leur conteneur disons #wrapper {height:300px;}, vous pouvez simplement mettre le #primary et la #secondary valeur de la hauteur pour 100%. Mais si vous ne voulez pas spécifier de toute la hauteur de la valeur, alors vous pouvez utiliser display:table option comme dans l'exemple ici http://jsfiddle.net/qiqiabaziz/LFEF5/

OriginalL'auteur Qiqi Abaziz

Your CSS

.table{display:table;width:99.98%;margin:0 auto;padding:0 0.01% 0 0.01%;border-collapse:separate;border-spacing:5px;}
.row{display:table-row;}
.cell{display:table-cell;text-align:center;width:50%;}

Your HTML

<body>
    <div class="table">
        <div class="row">
            <div class="cell">content for this div
            </div>  
            <div class="cell">content for this div
            </div>
        </div>
    </div>
</body>

OriginalL'auteur user3302090

0

Faire les deux divs d'égale hauteur (soit en déclarant leur taille en px, em ou %) et à déclarer leurs overflow : auto, donc si contenu dans l'un ou les deux divs augmente, le défilement est fournie automatiquement et leurs hauteurs ne pas la perturber.

OriginalL'auteur qwerty

assurez-vous que le div parent (div wrapper) a une largeur en pixel

<div id="wrapper">
    <div id="primary"></div>
    <div id="secondary"></div>
</div>

#wrapper {
    width:300px;
}
#primary {
    width:50%;
    float: left;
}
#secondary {
    width: 50%;
}

cela fonctionne, sauf vrd primaires a de la marge et/ou padding

OriginalL'auteur arnaldododo

Vous devez vous connecter pour publier un commentaire.