Découvrez la hauteur des divs et définissez la hauteur des div

J'avais une erreur NaN avec le code SLaks. Donner à MaxHight une valeur initiale de 0 a fait l'affaire.

var maxHeight = 0; $('div') .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); }) .height(maxHeight); 

Merci SLaks!

Vous pouvez utiliser la méthode de height de jQuery pour obtenir et définir la hauteur d'un élément.

Vous devez parcourir les éléments, trouver le plus grand, puis définir la hauteur de tous les éléments.

 var maxHeight; $('div') .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); }) .height(maxHeigt); 

Remplacez 'div' par un sélecteur jQuery qui sélectionne les éléments que vous souhaitez égaliser.

 <script> function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); } $(document).ready(function() { equalHeight($(".column")); }); </script> 

Voir cet exemple

Ceci est directement sorti des pages de documentation jQuery:

 $.fn.equalizeHeights = function(){ return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) ) } $('input').click(function(){ $('div').equalizeHeights(); }); 

Je crois que vous recherchez ce plugin: equalizeBottoms by Ben Alman

C'est un code simple

 var heights = $("element").map(function () { return $(this).height(); }).get(), MaxHeight = Math.max.apply(null, heights); 

ou

 var highest = null; var hi = 0; $(".testdiv").each(function(){ var h = $(this).height(); if(h > hi){ hi = h; highest = $(this); } }); highest.css("background-color", "red"); 

Wow – les gens veulent vraiment obliger jQuery trickery dans celui-ci – vous pouvez tout faire avec CSS. De stopdesign :

Lors de la création de mises en page liquides à l'aide de CSS, voici quelques considérations que je tiens à l'esprit:

• Colonnes double div: Autant que je déteste utiliser un marquage supplémentaire, il n'y a pas de moyen plus simple d'assurer une compatibilité maximale sur plusieurs navigateurs que d'utiliser deux divs pour chaque colonne. Les divs extérieurs sont utilisés pour régler les largeurs. Les divs intérieurs sont utilisés pour régler le rembourrage pour créer des gouttières d'espace blanc entre chaque colonne.

• Utilisez des gouttières à largeur fixe (ou des largeurs de gouttière en fonction de la taille du type): Lorsque la largeur de la colonne est appliquée indépendamment du rembourrage des colonnes, comme ci-dessus, les pourcentages peuvent être utilisés pour les largeurs, et les pixels ou les ems peuvent être utilisés pour le rembourrage. Ceci, sans se soucier d'une seule colonne qui se heurte au fond d'une autre, ou sans colonnes de sous-dimensionnement délibérément, elles s'adaptent toujours à la page. Même si les largeurs des colonnes changent lorsque le navigateur devient plus large ou plus étroit, le texte de la page reste généralement de la même taille. La quantité d'espace blanc requise pour que le texte se sent à l'aise dépend de la taille du type, plutôt que de la taille de la colonne contenant ce texte.

• Évitez les colonnes à largeur fixe: autant que possible, faites de toutes les colonnes un pourcentage de largeur. Il est tentant de penser que les barres latérales et les colonnes de navigation sont une seule largeur statique, et laisser la colonne principale ou centrale effectuer toute l'expansion. Cela détruit rapidement toutes les proportions qui ont pu être soigneusement choisies, car les colonnes de largeur fixe peuvent sembler chères et faibles lors de grandes résolutions. Ou les barres latérales larges à largeur fixe peuvent devenir intimidantes, surcharger la colonne principale à des largeurs de navigateur plus étroites.

L'astuce consiste à créer une image d'arrière-plan ultra large (ou deux images pour les mises en page à 3 colonnes, ainsi la nature coulissante de la technique). L'image est partiellement opaque et partiellement transparente. Il est carrelé verticalement à l'intérieur du conteneur parent, tout comme la technique de Dan's Faux Columns. La partie opaque de l'image doit correspondre aux pourcentages de la colonne qu'elle aide à créer, de sorte qu'elle puisse être positionnée avec une valeur de position d'arrière-plan identique. Cela permet de passer d'opaque à transparent pour devenir le point d'axe pour la position de l'arrière-plan. La position de la partie opaque dans l'image pourrait être modifiée en fonction de l'ordre du contenu dans le code HTML pour produire presque tous les effets souhaités.

Bien sûr, si tout ce que vous voulez, c'est résoudre le problème de la taille égale, ce que vous voulez, c'est le One True Layout:

http://fu2k.org/alex/css/onetruelayout/example/interactive

Eh bien, vous pouvez obtenir et régler la hauteur avec la height()

 height = $('#id').height() 

Bouclez les éléments et vérifiez la hauteur, par exemple:

 $elements = $('.container'); var max_height = 0; for ($element in $elements) { if (max_height > $element.height()) max_height = $element.height(); } $elements.height(max_height);