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

**m-werk** · 11.06.2013, 14:26

Hallo Leute,

ich hab hier ein kleines Problem, auch Wiki konnte mir hier nicht helfen.

Ich hab ein Layout mit #left, #main und #right.
Jetzt ist es so, dass ich gerne folgendes hätte. Alle 3 Bereiche sollen sich der höhe automatisch anpassen. Wenn jetzt im main viel drinn steht, soll left und right sich automatisch anpassen, da ich bei denen eine Hintergrundfarbe gewählt habe.

Kann man das irgendwie lösen?

lg, Andi

**planepix** · 11.06.2013, 14:55

Stichwort ist hier fault columns, falsche Spalten.
Danach wirst du google und dann auch hier im Forum viel dazu finden.

Einer der einfachsten Ansätze:
Erstelle für den Container #container ein Hintergrundbild, mit den Breiten und den 3 Hintergrundfarben der einzelnen Spalten.
Dann sind die Spalten alle optisch gleich lang.

**m-werk** · 11.06.2013, 14:59

Danke für den Tipp, aber das mit der Hintergrundgrafik wollte ich verhindern. Sonst hätte ich es eh so gemacht.

Ich hab aber hier jetzt doch noch was gefunden und das hat jetzt funktioniert:

Code:

<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>

LG, Andi

**isa** · 20.11.2013, 09:47

Zitat von m-werk

Danke für den Tipp, aber das mit der Hintergrundgrafik wollte ich verhindern. Sonst hätte ich es eh so gemacht.

Ich hab aber hier jetzt doch noch was gefunden und das hat jetzt funktioniert:

Code:

<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>

LG, Andi

Hallo Andi,
wo/wie hast du das Skript eingebunden? Ich nutze Contao 3.0.6 mit dem neuen CSS-Framework. --> #Main kommt vor #Left und #Right
Die ganzen Tricks mit "faux columns" etc. nützen mir Nichts, weil ich kein optisches Problem habe, sondern tatsächlich das Problem, dass sich die Spaltenhöhe immer nach dem #Main content richtet. Wenn dann die Navi im #Left mal länger wird, skaliert sich der Mittelteil nicht mit und die Navigation läuft über den #Footer hinaus. Mit #Left habe ich nur Einfluss auf die Spaltenhöhe, wenn ich einen absolute Höhe eingebe.
Hast du einen Tipp?
Viele Grüße!
Isa

**m-werk** · 20.11.2013, 10:03

Hallo Isa,

ich hatte diesen Code im Seitenlayout unter "Eigener JavaScript-Code" eingebaut.

**isa** · 20.11.2013, 13:55

Zitat von m-werk

Hallo Isa,

ich hatte diesen Code im Seitenlayout unter "Eigener JavaScript-Code" eingebaut.

Hallo Andi,
so ganz funktioniert es bei mir noch nicht. Ich fürchte ich benötige noch ein wenig Erklärung. Also die Variable h sagt, dass sie höhe des Containers als Maßstab nehmen soll. Anschließend sollen die Bereiche #left, #main,#right die höhe des containers füllen + px. Was verbirgt sich hinter px? Welche Angabe wird da addiert?
Vielen Dank schonmal und viele Grüße!
Isabelle

**wulf** · 20.11.2013, 14:46

+'px' ist nur die Maßeinheit Pixel, da .offsetHeight nur einen Zahlenwert liefert, dh. bei einer Containerhöhe von 960 px wird h nur 960 zugewiesen.
Zum Setzen der Höhe von 'left','main' usw. benötigt man aber noch eine Maßeinheit, daher h+'px', was nichts anderes als 960px ergibt

**isa** · 20.11.2013, 15:12

Hallo Wulf,
danke erstmal. Was ist, wenn ich dem #container keine festen Pixel zugewiesen habe? Werden sie dynamisch berechnet?

**wulf** · 20.11.2013, 15:33

Jupp, container beinhaltet ja die divs 'main', 'left', 'right' und bekommt automatisch vom "höchsten" div die Höhe.

**isa** · 21.11.2013, 16:41

Hallo,
ich habe nun viel experimentiert und festgestellt, dass beim Einbinden des o.g. Scripts zwar alle Spalten auf gleiche Höhe erweitert werden, nämlich die die der Container laut Inhalt hat, aber leider werden hier auch verborgene Elemente und geschlossene Akkordeons mit berücksichtigt, als sei der Text tatsächlich auf der Seite.

Fällt dazu jemandem noch etwas ein?
Viele Grüße! Isa

**tblumrich** · 21.11.2013, 16:51

Zitat von isa

Hallo,
ich habe nun viel experimentiert und festgestellt, dass beim Einbinden des o.g. Scripts zwar alle Spalten auf gleiche Höhe erweitert werden, nämlich die die der Container laut Inhalt hat, aber leider werden hier auch verborgene Elemente und geschlossene Akkordeons mit berücksichtigt, als sei der Text tatsächlich auf der Seite.

Das Problem hab ich auch mit dem Script, das ansonsten gut funktioniert.

Gibts da eventuell eine Lösung?

Gruß
Thomas

**wulf** · 21.11.2013, 19:13

Wer auf den layout-builder verzichtet, kann ja mal eine Lösung mit Flexbox versuchen

Code:

#container {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;      /* TWEENER - IE 10 */
      display: -webkit-flex;     /* NEW - Chrome */
      display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

#left {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 1;         /* OLD - Firefox 19- */
      width: 15%;               /* For old syntax, otherwise collapses. */
      -webkit-flex: 1;          /* Chrome */
      -ms-flex: 1;              /* IE 10 */
      flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
      -ms-flex-order: 2;              /* TWEENER - IE 10 */
      -webkit-order: 2;               /* NEW - Chrome */
      order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

#main {
    width: 70%;
    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
      -ms-flex-order: 2;              /* TWEENER - IE 10 */
      -webkit-order: 2;               /* NEW - Chrome */
      order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

#right {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 1;         /* OLD - Firefox 19- */
      width: 15%;               /* For old syntax, otherwise collapses. */
      -webkit-flex: 1;          /* Chrome */
      -ms-flex: 1;              /* IE 10 */
      flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
      -ms-flex-order: 2;              /* TWEENER - IE 10 */
      -webkit-order: 2;               /* NEW - Chrome */
      order: 3;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

siehe dazu http://css-tricks.com/using-flexbox/

**Andreas** · 21.11.2013, 20:58

Hier noch ne saubere Lösung mit Javascript - MooTools

HTML-Code:

XHTML:
<script type="text/javascript">
  /* <![CDATA[ */
  (function($) {
    window.addEvent('domready', function()
    {
      var newHeight = Number.max($('main').getSize().y, $('left').getSize().y, $('right').getSize().y);
      $$($('main'), $('left'), $('right')).setStyle('height', newHeight.toInt());

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

HTML5:
<script>
  (function($) {
    window.addEvent('domready', function()
    {
      var newHeight = Number.max($('main').getSize().y, $('left').getSize().y, $('right').getSize().y);
      $$($('main'), $('left'), $('right')).setStyle('height', newHeight.toInt());

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

**tblumrich** · 21.11.2013, 22:32

Hast du das eventuell auch für jQuery?

Gruß
Thomas

**Andreas** · 21.11.2013, 23:28

Nein, kann ich aber mal machen, muss mich sowieso mal in jQuery einarbeiten.

Je nach Umgebung kann man das auch noch vereinfachen und direkt die Höhe von #container holen, dann wird's ein Einzeiler.

HTML-Code:

$$($('main'), $('left'), $('right')).setStyle('height', $('container').getSize().y.toInt());

**wulf** · 21.11.2013, 23:36

Code:

<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>

sollte klappen.
Edith: nochmal überarbeitet (man lernt ja nie aus)

**isa** · 22.11.2013, 08:19

Hallo Wulf und Andreas,
könnt ihr mir noch sagen, wo/wie ich das Script einbinde?
Viele Grüße!
Isa

**Mokkujin** · 22.11.2013, 09:29

Hallo isa,

ich würds da einbinden ...

Themes > Seitenname > Seitenlayout > Experteinstellungen

**isa** · 22.11.2013, 12:48

Zitat von Mokkujin

Hallo isa,

ich würds da einbinden ...

Themes > Seitenname > Seitenlayout > Experteinstellungen

Hallo Mokkujin,
hat leider nicht geklappt. müsste das nicht vllt. ins fe_page Template?

**Bas** · 22.11.2013, 13:15

Javascript in Contao einbinden: http://ck2013.may17.de/javascript-einbinden.html (Joes Vortrag von der Konferenz 2013)

**isa** · 22.11.2013, 13:38

Zitat von Bas

Javascript in Contao einbinden: http://ck2013.may17.de/javascript-einbinden.html (Joes Vortrag von der Konferenz 2013)

Vielen Dank! Aus der Summe aller Hinweise und Scripte konnte ich mein Problem lösen.

**isa** · 22.11.2013, 17:43

Hallo nochmal,

das Basisproblem mit den dynamischen Spaltenhöhen für die Layoutbereiche ist nun gelöst. Allerdings berücksichtigt das Script nicht die eingebauten Akkordeons. Wenn man es öffnet verschwindet es unter dem footer. Kann man das Script entsprechend noch anpassen?
Viele Grüße!
Isa

**wulf** · 22.11.2013, 18:15

Welche Version hast du den jetzt genommen: mootools oder jquery ?
Am Besten funktioniert meiner Meinung nach die CSS Version, aber die verträgt sich leider nicht so gut mit dem layout-builder. Hauptproblem bei den Javascript-Versionen ist halt das Berechnen der Höhe,
da die Accordions dazwischenfunken. Theoretisch könnte man die Gesamthöhe inklusive aller geöffneter Accordions ermitteln, aber da nicht immer alle Accordions geöffnet sind, würde es die Höhe verfälschen.

**isa** · 22.11.2013, 18:20

ich habe das jQuery-Script genommen und es nach Anleitung in den Templates eingebunden. Ohne Layout-Builder komme ich leider nicht nicht aus. Ich hatte auch schonmal ein Javascript ins Seitenlayout eingebunden, aber dort passierte genau das, was du beschrieben hast. Die Gesamthöhe bei geöffneten Akkordeons wurde dargestellt.

**wulf** · 22.11.2013, 18:49

Vielleicht nicht die schönste Lösung, aber vielleicht reicht ja ein #main{overflow-y:auto;}.
So bleiben die Höhen erhalten und wenn ein Accordion geöffnet wird, erscheint ne scroll-leiste.

**isa** · 22.11.2013, 19:45

Danke erstmal. Werd's morgen mal ausprobieren. Irgendwie denke ich immer es muss doch sowas wie "onclick resize" möglich sein, das man vllt. vom Accordion aus steuert? Aber ich benutze halt immer WYSWIG-Editoren und kann eben keine Scripts....

**wulf** · 22.11.2013, 20:26

Eine andere Möglichkeit wäre eine kleine Änderung im j_accordion.html5 template
einfach heightStyle: 'content' in heightStyle: 'auto' ändern,
dadurch bekommt jedes Akkordion die Höhe vom grössten Akkordion-Element und das Script erfüllt seine Aufgabe (sieht allerdings etwas sche... aus, wenn die Akkordion-Elemente extrem unterschiedliche Höhen haben)

**Andreas** · 23.11.2013, 00:35

Ich habs jetzt nicht ausprobiert, aber eigentlich müsste doch min-height anstatt height für die Spalten ausreichen, oder?

HTML-Code:

...setStyle('height', newHeight.toInt())...
// wird zu 
...setStyle('min-height', newHeight.toInt())...
// evtl. mit 'minHeight' probieren, wenn's nicht geht

**Andreas** · 23.11.2013, 00:40

offtopic

@wulf

Das mit display:flex; ist klasse. Arbeitest du daran? Wäre schön, wenn das mal das neue Contao Layout werden würde. Hapert aber eventuell an der Browserkompatibilität. Ich spiele zur Zeit ein wenig damit rum.

**wulf** · 23.11.2013, 02:05

offtopic
@Andreas: Bei Flex-Box fehlt leider die Abwärtskompatibilität, ansonsten wäre es schon viel weiter verbreitet. Ich glaube aber, das es Zukunft hat, habe gerade gesehen, dass es der IE11 unterstützt und Microsoft sogar auf ihren
Extra-Wurst-Präfix "-ms-" verzichtet. Hier findest du noch ein paar nette Anregungen, was man alles damit machen kann http://www.w3.org/TR/css3-flexbox/. Richtig angewendet, ist
es ideal für Desktop/Mobile Seiten, aber für "reale Projekte" wohl noch problematisch ("Wieso sieht die Seite auf meinem IE6 so komisch aus" :-) )

**isa** · 23.11.2013, 12:28

Zitat von wulf

Eine andere Möglichkeit wäre eine kleine Änderung im j_accordion.html5 template
einfach heightStyle: 'content' in heightStyle: 'auto' ändern,
dadurch bekommt jedes Akkordion die Höhe vom grössten Akkordion-Element und das Script erfüllt seine Aufgabe (sieht allerdings etwas sche... aus, wenn die Akkordion-Elemente extrem unterschiedliche Höhen haben)

Also ich habe jetzt sämtliche Vorschläge probiert. Nix tut sich. Der Overflow-y zum Scrollen wird im Accordion nicht angezeigt, im j_accordion.xhtml Template habe ich autoHeight: true gesetzt, und auch im jQuery von oben statt .height .minheight und min-height probiert. Kann ich dem Akkordeon div eine ID geben und diese mit ins Script aufnehmen? Wenn ja, wie?

**Andreas** · 23.11.2013, 13:31

Zeig doch mal bitte die Seite.

**isa** · 23.11.2013, 13:33

www.it-p.de
bzw. http://www.it-p.de/service-management.html
hier läuft die navigation raus und hier wäre z.B. das Problem mit den Akkordeons. http://www.it-p.de/unternehmen.html

**wulf** · 23.11.2013, 13:34

@Isa
Gibt es eigentlich einen Link zu deiner Seite ?

Code:

#main{overflow-y:auto;}

sollte funktionieren, es sei denn, es wird irgendwo im CSS überschrieben.

im j_accordion.xhtml Template habe ich autoHeight: true gesetzt

Code:

$(document).ready(function() {
      $(document).accordion({
        // Put custom options here
        heightStyle: 'auto', // 'content' durch 'auto' ersetzen
        header: 'div.toggler',
        collapsible: true
       
      });

Der Vorschlag mit min-height funktioniert wirklich nicht

**isa** · 23.11.2013, 13:42

in meinem Template sieht der Text aber so aus:

$(document).ready(function() {
$(document).accordion({
// Put custom options here
autoHeight: false,
header:'div.toggler',
collapsible: true,
active: false
});

deshalb hatte ich da bei autoHeight: true, gesetzt.

Edit: ok, hab die Zeile jetzt mit deiner überschrieben. Funktioniert schonmal.
hat mir aber leider im Moment noch Nichts für das Spaltenproblem genützt.

**wulf** · 23.11.2013, 14:19

Wenn ich es richtig sehe, dann ist das Script zur Spaltenanpassung gar nicht eingebunden.

**isa** · 23.11.2013, 15:06

Ja, hab's wieder rausgenommen, weil die Seite produktiv ist und dann manche Inhalte nicht vollständig dargestellt werden.

**Andreas** · 23.11.2013, 15:11

Ich habe das Script für die Spaltenanpassung nicht gefunden.

Mach mal ne Datei files/js/columns.js

Code:

// columns.js

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

Dann über die Head-Tags einbinden

HTML-Code:

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

Du hast sehr viel JS auf der Seite, brauchst du das alles? Mediaelement und Slimbox werfen einen JS-Fehler. Entscheide dich zwischen Mediabox, Slimbox oder Colorbox, alle 3 zusammen bringt nix. Wirf alle Scripts raus, die du nicht brauchst. Brauchst du Choosen? Vielleicht kommst du ja auch mit einer Bibliothek zurecht, MooTools oder jQuery.

Das mit min-height funktioniert auch mit Accordeon.

Dein linkes Menü hat schlechtes CSS, deswegen dieses Überlappen.

HTML-Code:

#left .mod_navigation {
  background-color: #FFFFFF;
  border: 1px solid #999999;
  border-radius: 5px;
  display: inline;
  float: left;
  font: 12px Verdana;
  min-height: 395px;
  overflow: visible;
  position: absolute;
  top: 0;
  width: 292px;
  z-index: 1000;
}

/* ändern in */

#left .mod_navigation {
  background-color: #FFFFFF;
  border: 1px solid #999999;
  border-radius: 5px;
  font: 12px Verdana;
}

**isa** · 23.11.2013, 16:56

Hallo Andreas, vielen vielen Dank für die Tipps. Habe alles befolgt, was du gesagt hast. Nur das Script kann ich erst am Montag einbauen. Werde dann berichten, ob es geklappt hat.