Découvrez la hauteur de divs et la hauteur de div.

Je suis assez nouveau pour javascript/jquery trucs, mais je tiens à faire ce genre de chose avec elle:

J'ai quatre divs side-by-side de ce genre et contenu dans chacun d'eux. Maintenant, si on a plus de contenu, il s'étend plus élevé. Je voudrais faire les autres divs comme trop élevé, même si elles n'ont pas autant de contenu. Donc, fondamentalement, je veux que le script passe par des divs et vérifier les hauteurs et les jeux de tous les divs les hauteurs de même que la plus haute div. J'espère que vous comprenez 🙂

source d'informationauteur mkoso

J'ai été faire un NaN erreur avec SLaks code. Donner maxHeight une valeur initiale de 0 a fait le tour.

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

Grâce SLaks!

13

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

Vous avez besoin pour faire une boucle à travers les éléments, trouver le plus grand, puis de régler la hauteur de tous les éléments.
```
var maxHeight;
$('div')
    .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
    .height(maxHeigt);
```
Remplacer 'div' avec un sélecteur jQuery qui sélectionne les éléments que vous voulez é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

C'est tout droit sorti de l'jQuery pages de documentation:

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

1

Je crois que vous êtes à la recherche pour ce plugin:
equalizeBottoms par Ben Alman

C'est simple code

var heights = $("element").map(function ()
{
    return $(this).height();
}).get(),

MaxHeight = Math.max.apply(null, heights);

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");

0

Wow - les gens veulent vraiment de la force de jQuery ruse dans celui-ci-vous pouvez tout faire avec les CSS. De stopdesign:

Lors de la création de mises en page liquides à l'aide de CSS, voici quelques éléments à garder à l'esprit:
- Double-div colonnes: autant Que je déteste l'utilisation supplémentaire de balisage, il n'y a pas de moyen plus simple pour assurer le maximum de compatibilité entre les différents navigateurs que l'usage de deux divs pour chaque colonne. L'extérieur divs sont utilisées pour régler les largeurs. Intérieure divs sont utilisés pour définir le rembourrage pour créer des gouttières de l'espace blanc entre chaque colonne.
- Fixe la largeur des gouttières (ou gouttière largeur en fonction de la taille du type): Lorsque la largeur de la colonne s'applique indépendamment de la colonne de rembourrage, comme ci-dessus, la somme des pourcentages peut être utilisé pour des largeurs, et les pixels ou les ems peuvent être utilisées pour le rembourrage. Ce, sans se soucier d'une colonne d'avoir cogné au fond de l'autre, ou sans délibérément sous-dimensionnement des colonnes, ce qu'ils ont toujours tenir sur la page. Même si les largeurs de colonne changer le navigateur devient plus large ou plus étroit, le texte sur la page reste généralement la même taille. La quantité d'espace nécessaire pour rendre le texte se sentir à l'aise dépend plus de la taille, du type, plutôt que la taille de la colonne contenant que du texte.
- Éviter les colonnes de largeur fixe: autant Que possible, toutes les colonnes d'un pourcentage de la largeur. Il est tentant de penser à des barres de navigation et la navigation colonnes comme étant une largeur statique, et de laisser la principale ou la colonne du milieu, de faire toutes les élargir. Ce pour détruire rapidement toutes les proportions qui ont été soigneusement choisis, fixe la largeur des colonnes peut regarder chétif et faible à grande résolution. Ou fixe-largeur encadrés peuvent devenir redoutables, plus de-alimenter la colonne principale au plus étroite navigateur largeurs.
L'astuce est de créer un ultra-large image d'arrière-plan (ou deux images pour 3-mises en page en colonnes, donc la porte Coulissante de la nature de la technique). L'image est partiellement opaque, et partiellement transparent. Il obtient en mosaïque verticale à l'intérieur du conteneur parent, tout comme Dan Faux Colonnes technique. L'opacité de la partie de l'image doit correspondre à des pourcentages de la colonne, il permet de créer, de sorte qu'il peut être positionné à l'arrière-plan identique-valeur de position. Cela permet la transition d'opaque à transparent pour devenir le point de l'axe de l'arrière-plan de sa position. La partie opaque de la position dans l'image peut être modifiée en fonction du classement de contenu dans le code HTML de produire presque n'importe quel effet désiré.
0

Bien sûr, si tout ce que vous voulez est de fixer l'égalité-hauteur de la question, ce que vous voulez, c'est Une Vraie Mise en page:

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

Eh bien, vous pouvez obtenir et de définir la hauteur avec height()

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

Boucle à travers les éléments et vérifier 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);

Vous devez vous connecter pour publier un commentaire.