100% height oder bei längeren Text größer

**lltodoll** · 17.03.2012, 17:32

Hi @ all,

sorry ich bekomme es einfach nicht hin und finde nichts passendes, vielleicht hat jemand ein Tip oder sogar ein Quelltext für mich.

Also, fe_page ist angepasst für sticky_footer, also ausserhalb von wrapper.

Meine Page soll so aussehen:
- Header (fixe Höhe)
- left, content und right mit left und right fixer breite und mindestens die volle Höhe vom Browser.
- footer mit fester Höhe.

So an sich kein Problem, wobei ich immer das Problem habe, das man immer scrollen muss, Sprich(ich glaube das es die Höhe vom Header ist) wird nochmal unten drangesetzt und man muss scollen. Left und Right soll ein Background bekommen was sich bis zum Footer runterzieht. Wenn der Inhalt mal größer wird, soll man dann halt scrollen und der Footer immer noch ganz unten sein unter dem Content. Hoffe jemand kann helfen. Danke

**RobertB** · 17.03.2012, 18:46

Hallo,

also ich für´s erste verstehe nicht so ganz was du vor hast?!

Vielleicht wäre eine bildliche Veranschaulichung besser?!

Ich verstehe das so, dass du den Header oben hast (fixer Höhe), dann kommen deine drei Spalten (left, middle, right) und darunter soll dann der Footer sein. Was ich hier nicht verstehe, soll der Footer immer sichtbar sein und der Mittelteil mit den drei Spalten nur scrollbar sein?

Oder soll egal wie hoch der Content (Mitte) ist immer darunter nur der Footer kommen?! Denn das wäre ja eigentlich Standard in Contao.

Gruß Robert

EDIT:

Ich habe das mit dem Sticky_Footer überlesen gehabt :/ Du hast also nach dem Wrapper unten immer dem Footer. Ich habe nach kurzer Suche im Netz das hier gefunden:

CSS ...
oder hier
CSS Sticky Footer

**folkfreund** · 17.03.2012, 20:30

Hallo lltodoll,

du bist also noch immer an dem Problem...
Meine Erweiterung ist noch nicht im Repository veröffentlicht, scheint aber inzwischen ganz gut zu funktionieren. Und sie kommt ohne Änderung an der fe_page aus und ist damit besser für Updates gerüstet...
Ich hänge dir mal ein ZIP an. Das kannst du unter system/modules/ auspacken. Danach einmal in der Erweiterungsverwaltung oben 'Datenbank aktualisieren'. Danach kannst du im Layout u.a. einstellen, dass der Footer immer am unteren Seitenrand sein soll.

Dein eigentliches Problem mit dem Hintergrund von #left und #right ist damit natürlich noch nicht gelöst.
Ich hab grad mal etwas rumprobiert. Es sieht vielversprechend aus, wenn du folgendes machst:

Code:

#container {
  position: absolute;
  min-height: 100%;
  top: 60px; /* die Höhe deines Headers */
}

#left {
  position: absolute;
  height: 100%;
}

Das hab ich aber nur im Firefox 11 probiert. Andere Browser müssen noch getestet werden...
Und mit StickyFooter kenn ich mich nicht aus, da ich meine eigene Erweiterung nutze ;-)

Gruß, folkfreund

**lltodoll** · 19.03.2012, 09:34

Also hier erstmal zwei Pics mit Paint, hoffe man kann es erkennen was ich versuche:
pic1.png
pic2.png
Pic1: Mehr Inhalt als Browser zulässt.
Pic2: Weniger Inhalt, also passend zur Browserhöhe.

Sorry das es so spät kommt, leider gestern den ganzen Tag kein INet.....

Links Content Rechts sollen immer die gleiche Höhe besitzen.
Wenn mehr Inhalt im Content ist als die Browserhöhe zulässt, soll es Scollbar werden und der Footer ganz zum Schluss kommen.
Wenn weniger Inhalt gibt, soll links content rechts langgezogen werden und der Footer unten sichtbar sein.

Hoffe so versteht ihr es.

**lltodoll** · 19.03.2012, 09:53

Zitat von folkfreund

Hallo lltodoll,

du bist also noch immer an dem Problem...
Meine Erweiterung ist noch nicht im Repository veröffentlicht, scheint aber inzwischen ganz gut zu funktionieren. Und sie kommt ohne Änderung an der fe_page aus und ist damit besser für Updates gerüstet...
Ich hänge dir mal ein ZIP an. Das kannst du unter system/modules/ auspacken. Danach einmal in der Erweiterungsverwaltung oben 'Datenbank aktualisieren'. Danach kannst du im Layout u.a. einstellen, dass der Footer immer am unteren Seitenrand sein soll.

Dein eigentliches Problem mit dem Hintergrund von #left und #right ist damit natürlich noch nicht gelöst.
Ich hab grad mal etwas rumprobiert. Es sieht vielversprechend aus, wenn du folgendes machst:

Code:

#container {
  position: absolute;
  min-height: 100%;
  top: 60px; /* die Höhe deines Headers */
}

#left {
  position: absolute;
  height: 100%;
}

Das hab ich aber nur im Firefox 11 probiert. Andere Browser müssen noch getestet werden...
Und mit StickyFooter kenn ich mich nicht aus, da ich meine eigene Erweiterung nutze ;-)

Gruß, folkfreund

Habe es mit deiner Lösung mal probiert, das Problem ist das immer der Abstand zum Header (top) unten drunter halt zuviel ist, sprich man muss immer scrollen, das soll nicht.

Habe mir überlegt das man header und footer absolut über den left content und right drüberlegt, jedoch weiß ich nicht wie es sich verhält bei Veränderung der Viewport also Browser größer/kleiner ziehen. Und das Problem ist das der Footer dann immer unten am Browser klebt und nicht Abhängig vom Inhalt...

**RobertB** · 19.03.2012, 18:12

Bin immer noch nicht so richtig schlau geworden.

Sollen einfach nur alle Spalten in Mittelteil gleich lang sein?
Dann hilft dir dies hier vielleicht weiter:

Floatende Divs gleich hoch machen
(Die Kommentare helfen dir vielleicht auch ein wenig wenn das nicht reicht)

Habe das auch bei nem aktuellen Projekt an dem ich sitze in Verwendung und geht super, nutze es zwar nur für die rechte Spalte aber sollte denke auch für alle drei Spalten gehen.

Gruß Robert

**lltodoll** · 19.03.2012, 18:23

Zitat von RobertB

Bin immer noch nicht so richtig schlau geworden.

Sollen einfach nur alle Spalten in Mittelteil gleich lang sein?
Dann hilft dir dies hier vielleicht weiter:

Floatende Divs gleich hoch machen
(Die Kommentare helfen dir vielleicht auch ein wenig wenn das nicht reicht)

Habe das auch bei nem aktuellen Projekt an dem ich sitze in Verwendung und geht super, nutze es zwar nur für die rechte Spalte aber sollte denke auch für alle drei Spalten gehen.

Gruß Robert

Werde es mir gleich mal durchlesen.

Mehr weiß ich dann auch nicht wie ich es erklären soll, die drei Spalten sollen halt eine mindestgröße von 100% (incl. Header und Footer) sein, auch bei sehr wenig Inhalt. Ist der Inhalt mehr als reinpasst, soll es verlängert werden und der Footer soll dann einfach unten dran gehangen werden, also erst beim ganz runter scollen zu sehen sein.

**RobertB** · 19.03.2012, 18:42

Ich glaube ich habe es verstanden

Schau mal in den Kommentaren, da schreibt einer glaube wie du das erreichst das der Inhalt mindestens so lang ist.

Habs doch noch hinbekommen. Dazu einfach in html, body und sämtliche wrapper die Höhe 100% eintragen und die Seite wird so hoch wie gewünscht.

Flo aus den Kommentaren schrieb das auf seine eigene Frage, Gibt es auch noch eine ähnlich einfache Lösung, damit die Seite mindestens 100% des Browserfensters groß ist?

**lltodoll** · 19.03.2012, 21:10

Ja ist schon so wie im Kommentar beschreiben, also wie ich es haben möchte,
leider funktioniert es nicht so wie ich es möchte.

Entweder bin ich zu blöd oder es funktioniert nicht im Opera oder ich überseh mal wieder was.

HTML-Code:

html,body {
width: 100%
height: 100%;
}

#wrapper {
height: 100%
}

#container {
height: 100%;
overflow: hidden;
}

Dann den Container mit dem Workaround eingefügt, Footer drunter....

Leider ist der Footer immer am unteren Browserrand und längerer Text wird einfach abgeschnitten, nicht verlängert.....

Liegt es vielleicht an Opera?