Sie sind hier: Startseite  / Wissenswertes  / jQuery / Javascript  / Gleiche Spaltenhöhe von CSS Elementen

CSS Elemente sollen die gleiche Höhe haben, auch wenn der Inhalt variiert.

Istzustand: Unterschiedliche Spaltenhöhen der Elemente

Speziell bei nebeneinander und / oder untereinander angeordneten Elementen, z.B. DIV's entscheidet im Standard, wenn nicht explizit eine Höhe per CSS angebeben wird, der Inhalt über die Höhe des Elementes. Schnell wird die Darstellung unschön, dass sich speziell bei floatenden Elementen die Platzierung ändert. Das Ergebnis kann dann so aussehen:

So soll es sein: Alle Spalten sind gleich hoch!

Es gibt zahlreiche Ansätze, darunter auch welche, die eher Quick and Dirty sind. Natürlich können Sie den Elementen mittels height bzw. min-height und max-height feste Werte geben. Kommt jedoch eine prozentuale Breite / Höhe ins Spiel, welche sich dynamisch verändern soll, Stichwort Responsive Design hinzu, dann ist alles nur ein Kompromiss.So soll die Darstellung eigentlich aussehen.

Die Lösung: Javascript für gleichhohe Spalten

Da auch ich immer wieder vor diesem "Problem" stand, habe ich mir eine Javascriptlösung ausgedacht. Folgendes Szenario liegt dabei an:

 

  • Die Seite besitzt ein Responsive Konzept, soll sich also prozentual anpassen
  • Alle Elemente, deren Spalten die gleiche Höhe haben sollen liegen nebeneinander und haben die gleiche CSS Klasse.
  • Als Bemessung soll das höchste Element übernommen werden.

 

Nachfolgende HTML Struktur liegt somit vor:

<div class="wrapper_teaser">
   <div class="teaser"></div>
   <div class="teaser"></div>
   <div class="teaser"></div>
</div>

Das Prinzip zum Auslesen der Spaltenhöhe der DIV Elemente

Zunächst muss ermittelt werden, welchen Wert das höchste Element hat. Da sich die die Höhe nach Veränderung der Breite auch verändern kann, Beispiel drehen eines Tablets oder Smartphones oder Verkleinern des Browserfensters, reicht ein Ermitteln nach dem Laden der Seite nicht aus.

 

Folgendes sind somit die Anforderungen:

 

  • Auslesen der Höhe nach dem Laden des DOM's (jQuery document.ready)
  • Auslesen der Höhe nach der Veränderung der Ansicht, Verkleinern Browserfenster, Bildschirm drehen bei mobilen Geräten
  • Anpassen der Spaltenhöhe aller Elemente, ausgehend vom höchsten Element

Die Wesentliche Funktion...

Kümmern wir uns zunächst um eine Funktion, die sowohl nach dem Laden des DOM's aufgerufen wird, die aber auch eine Anpassung der Auflösung erkennt.

function initViewport() {
   //Variable definieren, die die Timeoutreferenz bekommt
   var rId;

   //Funktion die aufgerufen wird, wenn sich die Größe der 
   //Auflösung verändert hat
   $(window).resize(function () {
      //Falls vorhanden bestehende Referenz löschen
      clearTimeout(rId);
      //Neuer Timeoutreferenz an Variable binden und nach
      // einer halben Sekunde Funktion rezised aufrufen
      rId = setTimeout(rezised, 500);
   });

   //Funktion, die nach dem Verändern der Auflösung 
   //aufgerufen wird
   function rezised() {
      //Zunächst wird überprüft, ob es mehr als ein Element 
      //mit der Klasse .teaser gibt erst dann wird die Funktion
      //clearHeights aufgerufen, um die Höhe zurück zu setzen
      $('.teaser').length >= 2 ? clearHeights() : null;
   }
   //Einmaliger Aufruf der Funktion nach dem Laden des DOM's
   rezised();
}

//Funktion, die nach dem Laden des DOM's aufgerufen wird.
$(document).ready(function () {
   initViewport();
});

Funktion, die die Spaltenhöhe der Elemente ausliest und anschließend anpasst

function setColumnHeight() {

   //Variable zur Speicherung aller Elemente
   var columns = $('.teaser');
   //Array, welches alle Spaltenhöhen der Elemente
   //aufnimmt
   var values = [];

   //For each Schleife, so werden alle Spaltenhöhen
   //ausgelesen
   columns.each(function () {
      //Dem Array wird die Spaltenhöhe des Elementes
      //als Ganzzahl hinzugefügt
      values.push(parseInt($(this).css('height')));
   });

   //Variable, die den Wert des höchsten Elementes
   //ermittelt
   var highestElement = Math.max.apply(Math, values);
     
   //Wieder eine for each Schleife um alle Elemente
   //mit der Klasse teaser erfassen können.
   //Jedem Element wird der ermittelte Wert der höchsten
   //Spalte zugeordnet
   columns.each(function () {
      $(this).css('height', highestElement + "px");
   });
}

Funktion, die die Spaltenhöhe nach Veränderung der Auflösung zurücksetzt

//Funktion, um die Höhe kurzfristig auf auto zu
//setzen. Notwendig, damit der Inhalt, der sich
//durch die Veränderung der Auflösung neu angeordnet
//hat, den Wert der automatischen Höhe bestimmt
function clearHeights() {
      //For each Schleife um alle Elemente 
      //durchlaufen zu können
      $('.subpageTeaser').each(function () {
	 //Alle Spalten erhalten den Wert auto
         $(this).css('height', 'auto');
   });

   //Variable definieren, die die Timeoutreferenz bekommt
   var cTimer;

   //Funktion, die nach dem Aufruf und zurücksetzen
   //der Höhe auf auto, den Wert wieder auf das höchste
   //Element verändert
   function resetColumnHeight() {
      //Falls vorhanden bestehende Referenz löschen
      clearTimeout(cTimer);
      //Neuer Timeoutreferenz an Variable binden und nach
      //150 Millisekunden die Funktion zum Anpassen
      //der Spaltenhöhe auf den höchsten Wert aufrufen.
      //Der Timeout ist für Chrome und Opera notwendig
      cTimer = setTimeout(setColumnHeight, 150);
   }
   //Aufruf der Funktion zum Zurücksetzen der Spaltenhöhe
   //auf den Wert auto
   resetColumnHeight();
}

Kompletter Code zur Anpassung der Spaltenhöhe mittels CSS und Javascript

Nebenan die komplette Datei ohne Kommentare. Unter dem text hier git es die Datei zum Download.

 

unkomprimierte Datei downloaden

Komprimierte Datei downloaden

/**
 * Created by sector12 on 25.11.2014.
 */

(function ($) {
    function setColumnHeight() {

        var columns = $('.teaser');
        var values = [];

        columns.each(function () {
            values.push(parseInt($(this).css('height')));
        });

        var highestElement = Math.max.apply(Math, values);

        columns.each(function () {
            $(this).css('height', highestElement + "px");
        });
    }

    function clearHeights() {
        $('.subpageTeaser').each(function () {
            $(this).css('height', 'auto');
        });

        var cTimer;

        function resetColumnHeight() {
            clearTimeout(cTimer);
            cTimer = setTimeout(setColumnHeight, 150);
        }

        resetColumnHeight();
    }

    function initViewport() {
        var rId;

        $(window).resize(function () {
            clearTimeout(rId);
            rId = setTimeout(rezised, 500);
        });

        function rezised() {
            $('.teaser').length >= 2 ? clearHeights() : null;
        }

        rezised();
    }

    $(document).ready(function () {
        initViewport();
    });
})(jQuery);

Top Produkte

Lade Inhalt
nächstes Bild
vorheriges Bild
Flash Karussell Professionell 3
jQuery Slider
Produktslider
Flash Imageslider Pro 4
HTML5 Slideshow Pro
HTML5 Accordion

Typo3 Freelancer gesucht?

Ich arbeite auch für Agenturen als Typo3 Freelancer und ebenso als Web Freelancer. Mehr Infos erhalten Sie auf der Freelancerseite.

 

Typo3 Freeelancer Mark Kirstein