Footer am unteren Browserrand

[comanche]

Ich weiß, ein leidiges Thema

Den Footer am unteren Rand zu platzieren habe ich in einer "handgemachten" Seite schonmal prima hinbekommen:
http://www.megerle.com/__heintzmann__/bestellen.html
Der Footer bleibt am unteren Rand, bis er vom Seiteninhalt verdrängt wird (also nicht "fixiert").

In einer C3-Installation will es mir partou nicht gelingen:
http://contao3.megerle.com/testseite.html

Der #wrapper ist 100% hoch, aber den #container bekomme ich einfach nicht auf 100% Höhe. Woran kann das liegen? Die Hierachie kann ich nicht ändern, da die Erweiterung dk_mmenu nicht funktioniert, wenn ich den Footer außerhalb des Wrapper platziere.

Kann mir jemand einen Tipp geben, was ich falsch mache?

Grüße,
Andreas

[Spooky]

Der #wrapper ist 100% hoch, aber den #container bekomme ich einfach nicht auf 100% Höhe. Woran kann das liegen? Die Hierachie kann ich nicht ändern, da die Erweiterung dk_mmenu nicht funktioniert, wenn ich den Footer außerhalb des Wrapper platziere.

Kann mir jemand einen Tipp geben, was ich falsch mache?

Den #container bekommst du nur auf 100% Höhe, wenn du den #wrapper auf height:100%; setzt (min-height:100%; reicht leider nicht, damit auch children 100% min-height haben können). Damit handelst du dir aber unter Umständen andere Probleme ein, weil nun dein #wrapper quasi als Viewport fungiert und dein content innerhalb von #wrapper scrollen muss.

Was genau funktioniert bei der dk_mmenu Extension nicht mehr, wenn du den <footer> nach dem #wrapper gibst?

[BugBuster]

http://contaogrid.glen-langer.de/con...ky-footer.html

[Spooky]

// ah nvm. hab mich verlesen

[comanche]

Danke für den Tipp!

Mir würde es eigentlich auch genügen, wenn der Footer einfach den restlichen Raum nach unten einnimmt. Es sollte also kein Leerraum NACH dem Footer entstehen. Alles oberhalb des Footers nimmt die Größe der Inhalte an.

Manchmal zweifle ich an mir selbst, weil ich so einfache Probleme nach vielen Jahren nicht in den Griff bekomme

Wenn Du den Browser dieser Seite mal zusammenschiebst bis die Mobil-Version angezeigt wird, dann passt der Footer. In den Breiten 744 und 960 Pixel nimmt der Footer nichtmal die Größe des Inhalts an
http://contao3.megerle.com/

Ich kapier's nicht.

Danke und Grüße,
Andreas

[Spooky]

Danke für den Tipp!

Mir würde es eigentlich auch genügen, wenn der Footer einfach den restlichen Raum nach unten einnimmt. Es sollte also kein Leerraum NACH dem Footer entstehen. Alles oberhalb des Footers nimmt die Größe der Inhalte an.

Manchmal zweifle ich an mir selbst, weil ich so einfache Probleme nach vielen Jahren nicht in den Griff bekomme

Wenn Du den Browser dieser Seite mal zusammenschiebst bis die Mobil-Version angezeigt wird, dann passt der Footer. In den Breiten 744 und 960 Pixel nimmt der Footer nichtmal die Größe des Inhalts an
http://contao3.megerle.com/

Ich kapier's nicht.

Danke und Grüße,
Andreas

Mit deinem ursprünglichen Problem hat das aber nichts zu tun. Dein <footer> hat über einer Browser Breite von 768px keine definierte Höhe, weil dessen Inhalt keine Höhe hat, weil es floating elements sind. Du brauchst also ein clearing, entweder durch ein clearing div oder durch folgendes CSS (nur IE8+ kompatibel):

footer:after {
    clear:both;
    content:"";
    display:block;
} 

Aber einer Browser Breite von 768px und kleiner passt die Höhe des Footers bei dir, weil die Inhalts Elemente durch einen Media Query nicht mehr nebeneinander gefloated werden (und dadurch der <footer> wiederum eine Höhe bekomt).

[comanche]

http://contaogrid.glen-langer.de/con...ky-footer.html

Danke, BugBuster, aber einen Sticky Footer (position:absolute) wollte ich nicht haben.

Grüße,
Andreas

[comanche]

Mit deinem ursprünglichen Problem hat das aber nichts zu tun. Dein <footer> hat über einer Browser Breite von 768px keine definierte Höhe, weil dessen Inhalt keine Höhe hat, weil es floating elements sind. Du brauchst also ein clearing, entweder durch ein clearing div oder durch folgendes CSS (nur IE8+ kompatibel):

footer:after {
    clear:both;
    content:"";
    display:block;
} 

Aber einer Browser Breite von 768px und kleiner passt die Höhe des Footers bei dir, weil die Inhalts Elemente durch einen Media Query nicht mehr nebeneinander gefloated werden (und dadurch der <footer> wiederum eine Höhe bekomt).

Herzlichen Dank für deine Geduld! Ich hab' wieder was dazu gelernt.

Entschuldige, dass ich deine Frage in deinem vorigen Posting überlesen hatte:

Was genau funktioniert bei der dk_mmenu Extension nicht mehr, wenn du den <footer> nach dem #wrapper gibst?

Sobald der Footer außerhalb des Wrappers steht, wird er nicht mehr im Container "div.mm-page" platziert. Dadurch slided er auch nicht mehr mit dem übrigen Seiteninhalt mit.

Grüße,
Andreas

[comanche]

Von einer Platzierung des Footer am unteren Rand bin ich wieder abgekommen.

Aber dennoch suche ich nach einer Lösung, so dass der Footer sich bis zum unteren Browser-Rand erstreckt:
http://contao3.megerle.com/testseite.html
Mit den 100% Höhe-Angaben klappt's nicht so richtig, weil dann ein leerer, zu scrollender Bereich entsteht. Spooky hat mich ja vorgewarnt *g*.

Ich benötige dies auch noch für ein aktuelles Kundenprojekt. Kennt jemand eine Lösung?

Grüße,
Andreas

[Spooky]

Mach

body {
    background-color:rgb(194, 0, 60);
}

#wrapper {
    background-color:rgb(226, 226, 226);
} 

dann sieht es so aus, als würde sich der Wrapper bis nach unten erstrecken

[comanche]

Mach

body {
    background-color:rgb(194, 0, 60);
}

#wrapper {
    background-color:rgb(226, 226, 226);
} 

dann sieht es so aus, als würde sich der Wrapper bis nach unten erstrecken

Wiedermal danke, Spooky!

Wenn ich ein browserfüllendes Hintergrundbild oder einen Hintergrund-Slider verwende, dann funktioniert der "Trick" mit der Farbe nicht. Hast du mir hierfür auch einen Tipp?

Viele Grüße,
Andreas

[mamboo]

Hallo Zusammen

Ich hab das gleiche Problem und habe alle Höhenangaben von body und wrapper im CSS auf 100% eingestellt. Der footer will einfach nicht unten kleben bleiben.

footer_unten.jpg

Layout: Layout-Builder und CSS-Reset aktiviert.
Warum funktioniert das mit Contao 3.x nicht?
Kann mir jemand weiterhelfen?

Vielen Dank schon mal.

[aadursun]

Also, wenn du die folgende Änderungen machst

#wrapper {
width: 100%;

#header {
width: 100%;
height: 100px;
position: fixed;
background-color: #fff;
border-bottom: 1px solid #707070;
z-index: 10000;
}

#footer {
padding-top: 25px;
padding-bottom: 25px;
background-color: #c2003c;
background-image: none;
color: #fff;
position: absolute;
width: 100%;
bottom: 0;
}

sollte es funzen; siehe mal bitte hier http://matthewjamestaylor.com/blog/k...om-of-the-page
oder hier in grün
http://www.cssreset.com/how-to-keep-...page-with-css/

VG
aadursun

[mamboo]

Hallo aadursun

Danke, das würde eingentlich so klappen. Jedoch bekomme ich jetzt immer einen Abstand zwischen den Container und dem Footer, wenn nur wenig Text im Content ist. Das sieht natürlich bei Anwendung eines Seitenhintergrundbildes schlecht aussieht.
Wie kriege ich jetzt diesen Abstand weg?

Danke für jegliche weiteren Tipps.

[Gandalf]

Hallo zusammen

Ich hake mich hier auch mal ein. Leider habe ich unter 3.2.8 auch Probleme (wie mamboo),
dass der Footer nicht unten kleben bleibt. Vorgegangen bin ich auch nach Anleitung von Glen Langer.
Der Footer befindet sich im Quellcode innerhalb der Wrappers.
Nun sieht mein CSS momentan folgendermassen aus:

html, body {height:100%;}
#wrapper {
    min-height: 100%;
    position: relative;
}
#container {
    background-image: url("../../files/standard/img/bg_white.png");
    background-repeat: repeat;
    clear: left;
    margin-left: auto;
    margin-right: auto;
    max-width: 730px;
    min-height: 600px;
    padding-bottom: 310px;
}

#footer {
    width:100%;
    height:310px;
    left:0;
    position:absolute;
    margin:0;
    padding:0;
    background-color:#1a2e40;
    background-image:url("files/standard/img/bg_footer.png");
    background-position: center bottom;
    background-repeat: repeat-x;
    bottom:0
}

Falls jemand eine Lösung hat welche funktioniert, wäre ich sehr dankbar.

Gandalf

[BugBuster]

Hallo Gandalf,
Link zu Seite wäre hilfreich.
Ansonsten kann ich sagen, dass deine Angaben nicht genau denen in meiner Beschreibung entsprechen, man beachte dabei das Bild (klicken für große Darstellung)

[Gandalf]

Hallo BugBuster

Danke!
Die Installation ist momentan leider nur Offline vorhanden.
Nach erneuten Versuchen habe ich in einem Thread den Hinweis gefunden, im #footer das position:absolut; weg zulassen.
Und es funktionierte :-)

Gandalf

[Spooky]

Bist du dir sicher, dass du nun tatsächlich einen sticky-footer hast? Ohne position:absolute; wird der <footer> einfach nach #container positioniert, und nicht bspw. am unteren Rand des Viewports, wenn #container nicht genug Höhe hat. Dein #container hat durch deine Angaben übrigens mindestens eine Höhe von 910px. Zusammen mit dem Header wirkt es momentan evt. nur so, wie wenn du einen sticky-footer hast (bei deiner Bildschirmauflösung).

[Gandalf]

Bist du dir sicher, dass du nun tatsächlich einen sticky-footer hast?

Du hast völlig recht. Zu früh gefreut

Ich bin mir wirklich nicht sicher, ob dies nur mit der CSS-Anweisung so funktioniert. Nun besteht wieder ein Abstand vom #footer zum unteren Browserrand.
Wie beim Mitglied "mamboo" beim "footer_unten.jpg" > Eintrag

Gandalf

[Spooky]

Ohne mehr vom Source zu sehen können wir nur weiterhin ins Blaue schießen. Am schnellsten kann man den Fehler feststellen, wenn man alles vor sich hat . Notfalls könntest du einfach deine Lokale Seite im FireFox komplett abspeichern lassen und hier als .zip hinaufladen. Das sollte zum debuggen reichen.

[mamboo]

Footer unten funktioniert mit position:absolute, der bleibt jetzt immer zumindest unten am Browserfenster resp. unten an der Seite, wenn diese mehr Text enthält.
Nur, jetzt ist der Abstand zwischen dem container und dem footer, wenn die Seite keinen oder nur wenig Inhalt hat... Wie krieg ich den jetzt weg, d.h. wie krieg ich den container dazu immer den gesamten Platz zwischen header und footer auszufüllen, auch wenn da nur eine Zeile Text drin steht?
Bin für jeden Tip dankbar.

[Spooky]

Das Problem bei Gandalf ist die [dk_mmenu] Extension. Diese fügt per JavaScript einen zusätzlichen wrapper ins DOM um den #wrapper herum ein, sodass die relevante HTML Struktur dann so aussieht:

<body id="top" class="win firefox gecko fx27">
    [...]
    <div class="mm-page">
        <div id="wrapper">
            <header id="header"></header>
            <div id="container"></div>
            <footer id="footer"></footer>
        </div>
        [...]
    </div>
    [...]
</body> 

Daher funktioniert auch der sticky footer nach der erwähnten Anleitung nicht mehr. Man könnte dies beheben, indem man auch noch zusätzlich

.mm-page {
    height:100%;
} 

definiert, damit handelt man sich aber potentiell andere Probleme ein (unter anderem funktionieren #top links dann nicht mehr, weil nicht mehr der <body> scrolled, sondern das .mm-page Element).


@mamboo: wie immer hilft es, wenn wir den kompletten HTML & CSS output einsehen können, ansonsten kann man nur mehr oder wenige vage Tipps und Vermutungen geben

[mamboo]

Hallo Spooky

Da meine Site auch erst in der Entwicklungsphase ist und nur lokal - hier das ZIP-File localhost.zip

[Spooky]

Hm, du stehst im Prinzip vor dem selben Problem wie comanche weiter oben ( https://community.contao.org/de/show...l=1#post308409 ). In deinem Fall ist es aber nicht so leicht zu lösen bzw. faken.

[mamboo]

Ja, hab schon so viel probiert aber nichts ging.
Irgend eine Idee?

[Spooky]

Ja, hab schon so viel probiert aber nichts ging.
Irgend eine Idee?

Ein einfacher "hack" wäre für dich folgender: erzeuge dir ein 980 x 1px großes PNG mit der Farbe #EADFCD/RGB(234,223,205) und definiere dies als Hintergrund Bild von #wrapper oder <body> mit

body {
    background:url('../images/bg.png') center top repeat-y #fff;
} 

bzw.

body {
    background-image:url('../images/bg.png');
    background-position:center top;
    background-repeat:repeat-x;
    background-color:#fff;
} 

[mamboo]

Danke Spooky

Da body und wrapper 100% breit sind geht das leider nicht einfach so. Dann wäre das Hintergrundbild nicht mehr sichtbar. Es sollte nur der mittlere Bereich des containers durchgehend bis zum footer mit einer Hintergrundfarbe sein.

[Spooky]

Da body und wrapper 100% breit sind geht das leider nicht einfach so. Dann wäre das Hintergrundbild nicht mehr sichtbar.

Doch, das Hintergrundbild wäre sichtbar. Die Idee ist enterweder im <body> oder #wrapper ein Hintergrundbild zu definieren, das genau die Breite des #container hat (980px) und einfach zentriert nach unten wiederholt wird. Dadurch gaukelt man vor, dass der #container Bereich (oder zumindest die Farbe, die er haben sollte) bis nach unten fortgesetzt wird.

// ah ich sehe erst jetzt, dass du dem #wrapper bereits ein Hintergrundbild zugewiesen hast, dies aber in deinem .zip nicht mit drin ist. Ich nehme mal an deswegen kannst du das nicht so hin-faken.

[mamboo]

Ja, aber Du bringst mich auf eine Idee. Ich setz mal das Hintergrundbild in den body und ein zentriertes einfarbiges mit der container-Breite in den wrapper. Das sollte ja eigentlich funktionieren.

So geht's:

background-image:url("../bg_wrapper.gif"); 
background-position:center top;
background-repeat:repeat-y;

Vielen herzlichen Dank :-)))

[Spooky]

Indeed, no problem

[operatorone]

[QUOTE]

Das Problem bei Gandalf ist die [dk_mmenu] Extension. Diese fügt per JavaScript einen zusätzlichen wrapper ins DOM um den #wrapper herum ein, sodass die relevante HTML Struktur dann so aussieht:

<body id="top" class="win firefox gecko fx27">
    [...]
    <div class="mm-page">
        <div id="wrapper">
            <header id="header"></header>
            <div id="container"></div>
            <footer id="footer"></footer>
        </div>
        [...]
    </div>
    [...]
</body> 

Daher funktioniert auch der sticky footer nach der erwähnten Anleitung nicht mehr. Man könnte dies beheben, indem man auch noch zusätzlich

.mm-page {
    height:100%;
} 

definiert, damit handelt man sich aber potentiell andere Probleme ein (unter anderem funktionieren #top links dann nicht mehr, weil nicht mehr der <body> scrolled, sondern das .mm-page Element).

Hallo,

ich stehe vor dem selben Problem, dass nun mein Sticky Footer nicht mehr wie gewünscht arbeitet. Ich könnte zwar mm-page {height:100%;} geben, aber dann zerlegt es das Layout auf den mobilen Geräten. Würde es helfen den Footer im Template zu separieren, also unter mm-page zu bringen und dann die height:100% zu setzen?

Viele Grüße,
operatorone

[Spooky]

Das geht nicht, der .mm-page wrapper wird per JavaScripts ins DOM eingefügt, würde also immer auch den footer umschließen.

Ich würde einfach an deiner Stelle per JavaScript die min-height des #wrapper setzen, anstatt es mit CSS zu versuchen. Das macht alles viel einfacher . jQuery Beispiel:

$(document).ready( function()
{
    $('#wrapper').css( 'min-height', $(window).height()+'px' );
}); 

Alternativ kannst du per CSS auch

#wrapper {
    min-height:100vh;
} 

verwenden, aber das funktioniert nicht in allen Browsern (und macht nicht das was es soll am iPad unter Safari).

[operatorone]

Hallo Spooky,

superklasse!!! Ich hab den JS-Schnipsel verwendet und es schien super zu funtkionieren.
Vielen Dank für deine schnelle Hilfe :-)

Viele Grüße,
operatorone

[operatorone]

Hi Spooky,

mir ist nun aufgefallen, dass die Seite immer 1313px hoch ist, auch wenn kein oder wenig Inhalt in der Hauptspalte ist. Kann ich das noch beeinflussen?
http://neu.dvse.info/organisation/zeitschrift.html

Viele Grüße,
operatorone

[Spooky]

Naja, das ist ja der Sinn des Sticky Footers. Was mir auffällt: du berechnest evt. noch die Höhe, die du dem #wrapper geben willst falsch. Du schreibst einfach

$(document).ready( function()
{
    $('#wrapper').css( 'min-height', $(window).height()-200+'px' );
}); 

Aber du solltest

1. Die Höhe des header dynamisch beziehen
2. Etwaige margins des #wrapper beachten

Was dir vielleicht nicht bewusst ist: dein #wrapper bekommt durch collapsing margins von .mod_breadcrumb einen margin-top von 20px.

[operatorone]

HI Spooky,

danke für die Hinweise. Ich werde diese berücksichtigen und den Code dementsprechend anpassen.
Danke dir.

Viele Grüße,
operatorone

[Spooky]

Damit die margins nicht auf den #wrapper collapsen kannst du dem #wrapper noch zusätzlich overflow:hidden; geben (sollte sonst keine Auswirkungen haben, denke ich), dann brauchst du das mit dem Margin nicht berücksichtigen, sondern nur mehr die header Höhe von der Viewport Höhe abziehen (für die min-height des #wrapper).

[operatorone]

Cool. Danke.