Höhen von Divs angleichen

Sgobin

# 30. September 2009

Ich weiß nicht warum. Es funktioniert offline, aber wenn ich die Seite auf den Server lade, wird die Höhe kleiner als der Inhalt. Und manchmal ändert sich die Höhe beim Neuladen des Browsers in Safari oder Firefox.

Antworten

Ramil

Permalink zum Kommentar# 22. Juni 2012

Ich glaube, das liegt daran, dass Ihre Seite nicht vollständig geladen ist. Versuchen Sie, diesen Code nach dem Laden des Fensters zu starten.

Michael Hogenmiller

# 24. März 2010

Interessanterweise hatte ich das gleiche Problem. Es funktionierte großartig auf der Festplatte, aber als ich die Dateien auf den Server hochlud, funktionierte das Skript aus irgendeinem Grund nicht auf die gleiche Weise. Es setzte tatsächlich die Höhe jedes Divs auf die Höhe des ersten.

Antworten

Michael Hogenmiller

Permalink zum Kommentar# 24. März 2010

…zumindest bis ich aktualisierte.

Liebe den Browser-Cache.

Josh

# 19. Juli 2011

das ist sooo gut! danke!

Antworten

Josh

Permalink zum Kommentar# 20. Juli 2011

…eigentlich habe ich eine kleine Frage. Wie implementiert man das auf mehreren Divs?

zum Beispiel habe ich 3 Sätze von 2 Divs auf einer Seite. Ich möchte nur, dass die Sätze angeglichen werden, nicht alle Divs auf der Seite. Ich mache mir nichts daraus, mehrere Klassen zu verwenden, aber was ist der kürzeste Weg, es zu schreiben.

div.equalize-1, div.equalize-2, div.equalize-3 sind meine Klassen.

Ich habe diese Klassen jedem Satz von Divs zugewiesen, die angeglichen werden sollen.

Jeder Tipp wäre toll, danke.

Chris

# 23. September 2011

// Plugin
$.fn.equalize = function() {
	var maxHeight = 0;
	
	return this.each(function(){
		var $this = $(this);
		
		if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
		
		$this.height(maxHeight);
        });
};


// Use generic class 
$('.equalize').equalize();

OR

$('div.equalize-1, div.equalize-2, div.equalize-3').equalize();

Antworten

Chris

Permalink zum Kommentar# 23. September 2011
Hoppla, ich muss die folgende Zeile ersetzen
```
if ($this.height() > maxHeight) { maxHeight = $this.height(); }
```
Vergessen, die „$this“-Variable zu verwenden!

Toby Stokes

# 23. Februar 2012

Ihre Plugin-Version funktioniert meines Erachtens nicht ganz richtig – sie scheint die aktuelle maxHeight anzuwenden, BEVOR sie alle Selektoren durchlaufen hat, sodass sie nur für Elemente NACH dem höchsten korrekt ist.
Die ursprüngliche Version ist jedoch in Ordnung.

Antworten

Mattia

# 16. August 2012

Danke Chris, das ist so einfach, ich hätte es mir selbst ausgedacht

Antworten

Eric

# 29. August 2012

Das ist wirklich wichtig, damit das Layout funktioniert. Entschuldigung, dass ich so neu in JS bin, aber ich muss zwei Divs auf die gleiche Höhe bringen. In CSS nenne ich meine Div-IDs #slides und #product. Füge ich das so in die Klammern ein? Es scheint nichts zu tun.

Vielen Dank,

var maxHeight = 0;

$(‘#slides’).each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(‘#product’).height(maxHeight);

Antworten

Eric

# 12. September 2012

Könnte mir jemand helfen zu verstehen, wie die Lücken gefüllt werden? Ich habe zwei nebeneinanderliegende Divs: #slideshow und #menuVertical, die ich in .equalize einschließe. Ich kann einfach nicht herausfinden, wo ich diese im Plugin einfügen soll.

Vielen Dank.

Antworten

Adam

# 11. Dezember 2012

Funktioniert das beim Ändern der Fenstergröße?

Antworten

Derek

# 1. Juli 2013

Das ist ein alter Beitrag, aber ich konnte das in einer Zeile machen, während ich die Variable gesetzt habe.

var h = Math.max.apply(Math, $.map($(‘.el’),function(el){return $(el).height()}));

Antworten

Raviraj

# 14. August 2013

$(“.equalize”).css({‘height’:$(“.equalize”).height()})

Antworten

Brendan

# 22. November 2013

Habe dieses Snippet verwendet. Vielen Dank, dass Sie es zur Verfügung gestellt haben!

Ich musste dies ein wenig erweitern, da ich es im Kontext eines responsiven Designs verwende. Dank einer Stack Overflow Antwort konnte ich mein Skript auslösen, wenn der Benutzer das Ändern der Fenstergröße pausiert oder beendet.

Ich dachte, jemand anderes hätte vielleicht das gleiche Problem, also dachte ich, ich teile es!

Antworten

Robert

# 13. Juni 2014

@Chris
Ihre Plugin-Version ist falsch: Wenn eine nachfolgende Box höher ist, werden nur diese und alle nachfolgenden Boxen in der Größe angepasst.

$.fn.equalize = function() {
    var maxHeight = 0;
    this.each(function(){
        if( $(this).height() &gt; maxHeight ) {
            maxHeight = $(this).height();
        }
    });
    this.height(maxHeight);
};
$('div').equalize();

Antworten

Robert

# 13. Juni 2014

Hier ist eine Erweiterung, um nur bestimmte Elemente innerhalb eines bestimmten Containers abzugleichen

$.fn.equalize = function(toBeEqualizedChildSelector) {
    var maxHeight = 0;
    this.find(toBeEqualizedChildSelector).each(function(){
        if( $(this).height() &gt; maxHeight ) {
            maxHeight = $(this).height();
        }
    });
    this.find(toBeEqualizedChildSelector).height(maxHeight);
};
$('#menu').equalize('.children');

JOHN

# 28. Mai 2015

Ich habe das Plugin modifiziert und es funktioniert für mich gut.

$.fn.equalize = function(){
    var maxHeight = 0;
    this.each(function(){
        var $this = $(this);
        if($this.height() > maxHeight){maxHeight = $this.height();}
    });

    return this.each(function(){
        $(this).height(maxHeight);
    });
};

Antworten

toancan

Permalink zum Kommentar# 23. Juni 2021

Hallo John, ich benutze deinen Code. Es funktioniert für
$(‘.equalize’).equalize();
aber nicht für
$(‘div.equalize-1, div.equalize-2, div.equalize-3’).equalize();

yogendra

# 28. Juli 2015

Hallo,

Ich habe die gleiche Funktion verwendet, aber sie funktioniert beim ersten Versuch nicht.
Ich muss die Website aktualisieren, um zu sehen, dass sie funktioniert.
sollte ich document.ready oder window.onload verwenden.
Warum tritt dieses Problem auf dem Server in der Website auf? Verursacht die Codeanordnung Probleme?

Antworten

Viki

# 14. Juli 2016

Ich verwende das Folgende, sowohl in document.ready als auch bei window.resize
Es funktioniert meistens, aber selten nicht... hat das etwas mit dem Browser-Cache zu tun?

http://codepen.io/vikired/pen/QEaKav

Antworten

Rafael M

# 16. März 2017

wow! Das spart mir viel Zeit, wenn das Umbrechen meines Divs wegen ungleicher Höhen mein Div bricht. Danke, dass Sie das zur Verfügung gestellt haben!

Antworten

James

# 6. Juli 2018

Für alle, die nach einer funktionierenden responsiven Lösung suchen, die das von Robert erwähnte Problem behebt, sollte dies funktionieren! Beachten Sie, dass alle Elemente, die Sie auf die gleiche Höhe bringen möchten, die gleiche Klasse (.same-height) haben müssen.

Wenn Sie einen weiteren Abschnitt von Elementen auf der gleichen Seite mit dieser Funktion nutzen möchten, müssen Sie diesen Elementen eine andere Klasse zuweisen (.same-height2) und so weiter...

Die Klasse (.same-height) funktioniert nur bei Bildschirmbreiten über 700 Pixel. Es gibt selten einen Fall, in dem Sie möchten, dass alle Elemente unterhalb dieser Bildschirmgröße die gleiche Höhe haben, es sei denn, die Elemente befinden sich immer noch in einer Reihe.

Wenn Sie möchten, dass die Elemente auch auf dem Handy die gleiche Höhe haben, verwenden Sie einfach die Klasse (.same-height-all). „all“ bedeutet „alle Bildschirmgrößen“.

Hier ist ein Beispiel, wie man es benutzt

Und hier ist der Code zum Einfügen in Ihre JS-Datei

       jQuery(window).load( function() { 


        // Same height boxes
        jQuery.fn.sameheight = function() {

            var maxHeight = 0;

            jQuery(this).each( function() {

                // reset the height
                jQuery(this).css({'height':'auto'});
                var thisHeight = jQuery(this).height();

                if ( thisHeight > maxHeight ) {
                    maxHeight = thisHeight;
                }

            });

            jQuery(this).each( function() {     
                jQuery(this).height(maxHeight);
            });

        };      


        jQuery('.same-height-all').sameheight();
                jQuery('.same-height-all2').sameheight();
                jQuery('.same-height-all3').sameheight();
                jQuery('.same-height-all4').sameheight();

        var width = jQuery(window).width();
        if ( width > 700 ) {

            jQuery('.same-height').sameheight();
            jQuery('.same-height2').sameheight();
            jQuery('.same-height3').sameheight();
            jQuery('.same-height4').sameheight();
        }

        jQuery( window ).resize(function() {

            jQuery('.same-height-all').sameheight();
                        jQuery('.same-height-all2').sameheight();
                        jQuery('.same-height-all3').sameheight();
                        jQuery('.same-height-all4').sameheight();

            var width = jQuery(window).width();
            if ( width > 700 ) {
                jQuery('.same-height').sameheight();
                jQuery('.same-height2').sameheight();
                jQuery('.same-height3').sameheight();
                jQuery('.same-height4').sameheight();
            } else {
                jQuery('.same-height').css({'height':'auto'});
                jQuery('.same-height2').css({'height':'auto'});
                jQuery('.same-height3').css({'height':'auto'});
                jQuery('.same-height4').css({'height':'auto'});
            }

        }); 


    });

Antworten

Dillon

Permalink zum Kommentar# 19. Juli 2018

Das ist die einzige, die für mich funktioniert hat. Hat perfekt funktioniert, danke! Schön, dass Mobile ausgeschlossen ist, da alles gestapelt ist.

JC

# 3. März 2019

Für responsive Websites

Ich denke, Sie können $(“div”).removeAttr(“style”); am Anfang des Codes hinzufügen, während Sie den Listener für das Größenänderungsereignis hinzufügen. Damit der Höhenwert zurückgesetzt wird, wenn das Fenster die Größe ändert.

Antworten

aastha

# 19. November 2019

Es funktionierte so einfach, ich habe nur meinen Klassennamen ersetzt und es hat funktioniert. Danke.
PS: Sie könnten eine Erklärung für Anfänger hinzufügen, auch wenn es einfach ist.

Antworten

Kommentare

Hinterlassen Sie eine Antwort Antwort abbrechen