left, main und right sollen sich autmatisch der höhe anpassen

[isa]

Danke, dass ihr so am Ball geblieben seid. Ich hab's jetzt schonmal auf meinem Testsystem eingebunden und es funktioniert!
@Andreas: Danke für die super Tipps. Hat mir sehr in der Performance geholfen und für manch anderen Lerneffekt gesorgt. Das Script hat bei mir leider nicht funktioniert.
@Wulff: Auch dir vielen Dank. Mit deinem Script hab ich es jetzt hinbekommen. Hab's wie von Andreas beschrieben in eine js Datei gepackt und in files gespeichert und dann im Head eingebunden.

Viele Grüße!
Isabelle

[tblumrich]

Hi.

Ich steig mal wieder mit ein. Ein Danke für Eure Bemühungen.
Kann es sein, dass das Script (das letzt von @wulf) nicht greift, wenn man nur zwei Spalten hat? Also Main und Right oder Main und Left z.B.?

Ich habs einfach in ein j_template gepackt und eingebunden.

Gruß
Thomas

//edit
Ah, funktioniert bei mir auch nur extern als JS-File im head eingebunden. Da die Akkordions bei mir sehr unterschiedlich befüllt sind, habe ich das Auto wieder zu Content (height) gewechselt... Geht auch. Bisschen hakelig, aber noch ok. DANKE.

[Andreas]

@isa: Mein Script funktioniert auf deiner Seite, ich hatte es auf deiner Seite ausprobiert. Wahrscheinlich hattest du MooTools nicht eingebunden, ist ja für MooTools programmiert.

Mit jQuery kannst du das hier nehmen. Mehr solltest du eigentlich nicht brauchen

(function($) {
    $(document).ready(function(){
       $('#main, #left, #right').css('min-height', $('#container').innerHeight());
    });
})(jQuery);

[isa]

@Andreas. Ach ok. Danke. Ja, hatte alle Moo_Tools ausgeschaltet. Na dann kann ich das ja nochmal testen.

[grashalm]

liebe contao-fans,

habe eure diskussion hier mit spannung gelesen und etliches ausprobiert; bisher leider ohne das "perfekte" ergebnis. benutze derzeit contao 3.2.9 mit jQuery, aber ohne mootools-bibliothek. nutze ebenfalls #left, #main und #right als 3-spaltiges system.

habe bisher mit folgendem skript relativ gute ergebnisse erzielt, welches ich im fenster "eigener javascript-code" des layouts ganz unten eingebaut hatte:

<script>
// equal height colums
var h = document.getElementById('container').offsetHeight;
document.getElementById('left').style.height = h + 'px';
document.getElementById('main').style.height = h +'px';
document.getElementById('right').style.height = h + 'px';
</script>

ergebnis: spalten waren immer gleich lang, auch wenn die mittlere (#main) vom inhalt her die kürzeste war. das hat also gepasst. wenn aber die mittlere spalte die längste war, dann musste ich die betreffende seite immer erst noch ein zweites mal laden (aktualisieren), bevor #left und #right genauso lang angezeigt wurden, wie #main. diese korrekturmöglichkeit wiederum funktioniert nur beim firefox und beim internet-explorer. google-chrome und opera (alle in der neuesten version) korrigieren hier nach der seiten-aktualisierung nicht!

hier meine startseite als ein beispiel dafür: http://www.die-schreibmaus.de/index.php/startseite.html

danach habe ich das skript von andreas und wulf ausprobiert und in das feld mit dem zusätzlichen javascript-code im layout eingebaut:

<script>
(function($) {
$(document).ready(function(){
var newHeight = Math.max($('#main').outerHeight(), $('#left').outerHeight(), $('#right').outerHeight());
$('#main, #left, #right').height(newHeight);
// oder als Einzeiler $('#main, #left, #right').height(Math.max($('#main, #left, #right').outerHeight()));
});
})(jQuery);
</script>

ergebnis: es lief genauso gut wie das erste skript, ich musste aber wieder die seiten aktualisieren, wenn #main den längsten inhalt hatte . das klappte auch wieder nur beim FF und IE.

dann habe ich das skript von andreas ausprobiert und wie angeleitet duch die head-tags in den experteneinstellungen aufgerufen:

// columns.js

(function($) {
window.addEvent('domready', function()
{
$$($('main'), $('left'), $('right')).setStyle('min-height', $('container').getSize().y.toInt());
});
})(document.id);

ergebnis: jede spalte behielt ihre individuelle länge, also gar keine angleichung mehr. kann eventuell daran gelegen haben, dass ich kein mootools nutze (wegen einer anderen erweiterung) und das skript aber für mootools gedacht war. dann habe ich noch das skript für jQuery von andreas ausprobiert und auch als columns.js-datei im files-ordner abgelegt:

(function($) {
$(document).ready(function(){
$('#main, #left, #right').css('min-height', $('#container').innerHeight());
});
})(jQuery);

habe dieses kurze skript wieder zwischen die "script"-tags des vorletzten skripts gesetzt und gespeichert. war das richtig so, oder muss es ohne script-tags und irgendwie gesondert in die jQuery-bibliothek eingebunden werden??? wenn ja, wie oder wo mache ich das?
ergebnis war übrigens wie beim letzten skript auch gleich null, also 3 unterschiedlich lange spalten...

wäre super nett, wenn ihr mir hier noch mal helfen könntet...

liebe grüße, grashalm

[isa]

Hallo Grashalm,
das Script von Andreas erfordert moo-tools. Das Script von Wulf mit der columns.js wird über das Template fe_page eingebunden und muss dann im Layout anghakt werden.

[Andreas]

Bei mir läuft deine Seite in allen neuen Browsern ohne zweimal zu laden. Spalten sind dann gleich hoch.

Scripte einbinden:

• Wenn JS über eine js-Datei eingebunden wird, dann das SCRIPT Tag in der js-Datei nicht benutzen.
• Wenn JS direkt im Quellcode eingebunden wird, dann SCRIPT Tag benutzen entweder im HEAD oder als letztes Element im BODY.
• Um sicher zu stellen, dass der DOM aufgebaut ist bevor dein Script startet, kannst du es nach dem Window ready Event starten. Kannst du dir abschauen, wie das mit den Templates für jQuery und für MooTools gemacht wird.
• Dein Script ist Vanilla (reines JS, braucht keine Bibliothek).

Du solltest auf deiner Seite ein STYLE Element nicht im BODY stehen haben, nur im HEAD (Zeile 192).

Du müsstest dein CSS wahrscheinlich sowieso nochmal überarbeiten. Durch die Positionierung einiger Elemente mit Margin im Header hängt dein header .inside an einer seltsamen Stelle. Schaus dir mal mit Firebug an. Vielleicht besser die Elemente des Headers mit position:absolute; positionieren.
Deine Seite ist auch zu breit, so dass immer eine horizontale Scrollleiste erscheint.

Mittlerweile mache ich meine Layouts mit display:flex; da habe ich dann automatisch gleich hohe Spalten. http://css-tricks.com/snippets/css/a-guide-to-flexbox/

[grashalm]

hallo isa, hallo andreas,

ganz lieben dank für eure unterstützung! hat schon jetzt ganz viel gebracht! habe als erstes die SCRIPT-tags aus der javascript-datei herausgenommen, neu gespeichert und diese datei wieder über den HEAD-bereich in den experteneinstellungen des layouts eingebunden. das war für mich mit abstand am einfachsten, weil ich mich mit script- und programmiersprachen überhaupt nicht auskenne. ergebnis: der #main-bereich wird jetzt immer komplett angezeigt und verschwindet nicht mehr "unter" dem footer. #left und #right sind jetzt zwar immer gleich lang, aber leider immer noch ein ganzes stück kürzer als der #main-bereich, wenn dieser der längste ist.

das ist zumindest bei zwei seiten so, einmal auf der startseite: http://www.die-schreibmaus.de/index.php/startseite.html, und zum beispiel auch hier: http://www.die-schreibmaus.de/index....14-feb-20.html.

wenn #main inhaltlich kürzer ist, als die außenspalten, werden alle spalten gleich lang angezigt! das ist super. weiterer erfolg: der browser google chrome agiert jetzt wie mein firefox (#main ist nach unten hin komplett, #left und #right sind gleichlang, aber kürzer als #main), und internet-explorer und opera zeigen jetzt die seiten sogar perfekt an (alle drei spalten gleich lang und #main ist auch immer komplett). und zweimal laden muss ich auch nichts mehr. von daher schon eine erhebliche steigerung!

andreas, du schreibst:

Um sicher zu stellen, dass der DOM aufgebaut ist bevor dein Script startet, kannst du es nach dem Window ready Event starten.

ich nehme an, das ist relevant, weil bis jetzt die außenspalten noch kürzer sind, wenn #main den längsten inhalt hat. was ist ein DOM und wie und wo kann ich es nach dem "window ready event" starten? muss ich da eine zeile aus den mootools-templates kopieren und muss sie anpassen? muss die dann in die javascript-datei? das werde ich kaum alleine schaffen, dafür habe ich zu wenig kenntnisse von skripten und templates...

ich weiß nicht, ob du die zeit hast, mich dabei noch etwas zu unterstützen? oder hat die tatsache, dass auf den o.g. seiten die außenspalten im FF und google chrome kürzer sind, eine andere ursache?

was die positionierung der elemente im head-bereich angeht, so werde ich mal versuchen, diese mit position:absolute; zu definieren. habe da neulich schon ewig dran rumgebastelt, bis es jetzt auf diese weise "geklappt" hat. irgendwie verschob sich der schriftzug oben immer mit dem rechten mauslogo zusammen. war äußerst schwierig. das muss ich mal in ruhe machen, wenn nichts anderes anliegt. danke für den hinweis!
das die seite zu breit ist, weiß ich. da muss ich noch drangehen. stand ohnehin schon auf meiner agenda. und das style-element im body schaue ich mir auch noch mal an. vielen dank jedenfalls für deine aufmerksamkeit! herzlichen dank auch an dich, isa!

freue mich sehr, wenn ihr mir mit den spalten noch mal auf die sprünge helfen mögt...

liebe grüße, grashalm

[Andreas]

Hier die Rahmen, die du um deinen Code packen musst.

<!-- jQuery -->
<script>
(function($) {
  $(document).ready(function() {

    // Code here

  });
})(jQuery);
</script>

<!-- MooTools -->
<script>
(function($) {
  window.addEvent('domready', function() {

    // Code here

  });
})(document.id);
</script>

SCRIPT musst du in js-Dateien natürlich weglassen.

Der DOM: http://de.wikipedia.org/wiki/Document_Object_Model Bild auf der rechten Seite sagt schon fast alles.

Javascript untersucht den DOM um ihn dann zu manipulieren, deswegen muss sicher gestellt sein, dass der DOM komplett vorhanden ist, bevor JS mit der Analyse startet.

Bei dir ist also der #container im Moment der Messung nicht so hoch wie nachher. Irgendwas macht deinen #container nach der Messung nochmal höher. Evtl. dieses .mejs_mediaelement.

Das hier ist dein CSS im HEAD von Contao

#wrapper {
  width: 1620px;
  margin: 0 auto
}
#header {
  height: 363px
}
#left {
  width: 300px;
  right: 300px
}
#right {
  width: 280px
}
#container {
  padding-left: 300px;
  padding-right: 280px
}
#footer {
  height: 295px
} 

Dieses CSS ist wesentlich für ein stabiles Layout. Diese Werte solltest du manuell nicht übeschreiben. Werte wie margin, border und padding solltest du auf diese Elemente auch nicht zusätzlich aufsetzen. Die Eigenschaft width solltest du keinen inneren Elementen vergeben. Sie erstrecken sich in der Breite automatisch auf den zur Verfügung stehenden Platz (nicht, wenn ein Element gefloatet ist oder absolut positioniert ist).

Das dürfte dich nochmal ein Stück weiter bringen.

ps In dem Editor hier fehlt echt mal ein Code-Highlighting für CSS und Javascript.

[grashalm]

hallo andreas,

erst mal vielen dank, für deine weitere unterstützung. bin aber nicht so ganz schlau geworden aus deiner antwort, oder besser: weiter verwirrt. das ist seit gestern mein momentanes script:

// columns.js

(function($) {
    $(document).ready(function(){
       $('#main, #left, #right').css('min-height', $('#container').innerHeight());
    });
})(jQuery);

das ich zur zeit als javascript-datei im files-ordner mit hilfe der aufrufenden zeile in den head-tags des layouts eingebunden habe. das müsste doch eigentlich ausreichen. oder soll ich anstattdessen deinen html-code im abschnitt jQuery deiner letzten antwort nehmen? und wenn ja, wie und wo binde ich den so ein, dass er in der jQuery-bibliothek im layout erscheint und ich ihn anhaken kann? das ist mir noch nicht klar. oder muss er woanders eingebunden werden, sodass er gar nicht in der jQuery-bibliothek erscheint?

was mich total wundert, ist, dass bei dir die anzeige meiner seiten in verschiedenen browsern problemlos lief. hast du im quelltext noch bestimmte anpassungen vorgenommen, oder liegt das an den konfigurationen meiner browser (FF, IE, Chrome und Opera)??? wenn es an dem mejs_mediaelement liegt, wieso taucht dann der fehler auch auf der startseite auf? kann ich stattdessen was anderes nehmen oder muss ich es noch irgendwie konfigurieren?

was die gestrigen erfolge bei den verschiedenen browsern angeht, so muss ich mich nochmal nach unten korrigieren (hatte nicht ganz korrekt ausprobiert):

im firefox wird der #main-bereich jetzt immer korrekt und in voller länge angezeigt. wenn #left und #right inhaltlich kürzer sind als #main, werden sie auch kürzer angezeigt. das hatten wir schon. wenn ich die startseite dann aktualisere, sieht es perfekt aus. wenn ich die andere seite dann aktualisiere (http://www.die-schreibmaus.de/index....14-feb-20.html), erweitern sich die außenspalten zwar weiter nach unten, aber nicht ganz bis zum ende von #main. sehr seltsam...

im internet-explorer wird die startseite auf anhieb perfekt angezeigt. bei der anderen seite fehlen an den außenspalten nach unten nur etwa 10 pixel. das ändert sich auch nach dem erneuten laden der seite nicht! alle anderen seiten sind ohnehin perfekt.

im chrome wird auf der startseite der #main-bereich auf anhieb korrekt angezeigt, die außenspalten sind gleichlang, aber deutlich kürzer als der #main-bereich. das ändert sich auch beim neuladen der startseite nicht. das gleiche gilt für die andere seite.

im opera werden auf beiden seiten die #main-bereiche auf anhieb richtig angezeigt, allerdings bleiben die außenspalten sowohl vor als auch nach dem neuladen immer zu kurz.

weiß nicht, ob dir das weiterhilft.

liebe grüße, grashalm

[Spooky]

Probier mal statt

$(document).ready 

$(window).load 

[tab]

@grashalm: Da ich gerade an der selben Problematik dran bin, kämpfe ich gerade mit ähnlichen Effekten wie du. Allerdings muss ich sageh, daß ich mit meinem aktuellen Skript kaum noch Probleme habe. Zu 95% stimmt alles, nur manchmal habe ich Effekte wie zu kurze Seitenspalten oder - bisher nur einmal - sogar eine Mittelspalte, die unten etwas über den Footer raus ging. Mein Skript ist exakt das gleiche wie bei dir. Offenbar hast du bei dir eine Konstellation, welche die gelegentlichen Probleme verstärkt. Ich gehe davon aus, dass diese von ungenügender Synchronisierung verursacht werden. Das Skript misst die Höhe des Containers, wenn die Höhe der Spalten noch gar nicht festliegt. Könnte z.B. unter anderem davon herrühren, dass Bilder geladen werden müssen, deren Größe sich aus dem HTML (und eventuell auch CSS) nicht ergibt, sondern vom Browser erst anhand der heruntergeladenen Bilddaten erkannt werden kann.

Ich werde jetzt auch mal die von Spooky vorgeschlagene Änderung ausprobieren.

[Spooky]

Ja, in seinem Fall könnten die Media Player auf der Seite dieses Problem verursachen. Da diese Player auch erst bei $(document).ready initialisiert werden (oder gar später) könnte es sein, dass die gesamte Höhe des #main bspw. bei $(document).ready noch nicht bekannt ist, wenn alles geladen ist ($(window).load) aber schon.

[tab]

Habe es jetzt mal eingetragen und sieht bisher gut aus, was allerdings noch nicht viel heissen muss, da es sowieso meist funktioniert hat. Ich werde es mal beobachten.

[grashalm]

hallo, hier noch mal grashalm,

mein spaltenproblem hat sich anscheinend gelöst! nach der wertvollen vorarbeit von andreas und isa hat mir dein tipp, spooky, zum entscheidenden durchbruch verholfen. nachdem ich nun die besagte zeile geändert habe, läuft das script bisher auf allen browsern von anfang an einwandfrei! habe bisher noch keine seite gefunden, die nicht auf anhieb korrekt angezeigt wird!
noch mal dickes lob @ isa, andreas, spooky und tab!