Spaltenhöhe per Javascript anpassen

In einem aktuellen Projekt stand ich wieder vor der Aufgabe das in einer designten PSD-Datei die Höhe der Spalten wunderbar ausgerichtet waren, es aber natürlich nach der Umsetzung in HTML sich die Höhe nach dem Inhalt richtet.

Es gibt sicherlich die Lösung ein gemeinsames Hintergrundbild unter beiden Spalten zulegen, dies ist aber nur bei starren Layoutbreiten möglich und wie ich finde unschön.

Ich habe daher ein kleines Javascript geschrieben welches die beiden Spaltenhöhen vergleicht und jenachdem welches kleiner ist, dies an die größere Höhe anpasst.

Vorher also ohne Javascript:

Dieses Script setzt die Mootools-Javascript-Core-Bibliothek vorraus. Kopieren Sie folgende Codezeilen in eine Datei die columns_compensade.js heißt.

// Class-Name:   colComp
// Author: Sven Rhinow (www.sr-tag.de,kservice@sr-tag.de)
// Licenz: LGPL
var colComp = new Class({    
    Implements: [ Options ],
    options:{
    col1: '.leftcol',
    col2: '.rightcol',        
    },   
    initialize: function(options){
    
    //overwrite options
    this.setOptions(options);
    
    this.col1 = this.options.col1;
    this.col2 = this.options.col2;
    
    var c1h = $$(this.col1).getStyle('height');
    var c2h = $$(this.col2).getStyle('height');
        
    if(c1h < c2h) $$(this.col1).setStyles({'height':c2h});
    else $$(this.col2).setStyles({'height':c1h});
    }            
});

//dieser Aufruf kann auch zur besseren Anpassung ausgelagert werden
var cC = new  colComp({
    col1:'.leftcol .colsubsite',
    col2:'.rightcol .colsubsite'
    });

oder laden sie sich die Datei columns_compensade.js hier runter

Diese Datei speichern Sie unterhalb ihres Webverzeichnisses z.b. unter js/columns_compensade.js und binden Sie dann in den HTML-Datei kurz vor dem schließenden Body-Tag (</body>) ein.

<script type="text/javascript" src="js/columns_compensade.js"></script>

Die beiden Zeilen col1: und col2: beim letzten Aufruf in der Datei müssen Sie noch mit den eindeutigen Element-Css-Klassen oder IDs bestücken.

Denken Sie bitte daran die Mootools-Basis vor dieser Datei einzubinden.

fertig.

Wenn alles richtig gemacht wurde sollte das Ergebniss wie in meinen Fall jetzt so aussehen: