Footer rutsch nach oben.

[Schnippel]

Hi Leute,

hab das Problem, daß der Footer, der am unteren Rand des Browserfenster sitzen soll,
bei zu wenig Inhalt nach oben rutscht.
Wie kann das umgangen werden?

Arbeite mit Contao 3.5xfooter.jpg

Der Footer ist als Modul über das Seitenlayout im Fußbereich eingebunden.

[Contao-Academy]

Du musst entsprechend das CSS anpassen.

Such mal bei Google nach "Footer immer unten anzeigen CSS" oder "Sticky Footer CSS".
Da findet man genug Beispiele wie das umzusetzen ist.

Viele Grüße
Christian

[Bastian F.]

Mit den CSS Einstellungen unten sollte das Problem schon behoben sein
Kann sein das du einzelheiten noch anpassen musst

html, body { height: 100%; }
#wrapper { position: relative; min-height: 100%; width: 100%; }
#container { padding-bottom: 50px;*} 
#footer { position:absolute; bottom: 0; width: 100%; height: 50px;}

[Schnippel]

Hi,

Habe das so umgesetzt, bekomme aber noch folgendes Problem, wenn ich das Browserfenster
zusammenrutsche, um schmale Viewportbreiten zu testen, dann rutscht der Text unterm Footer weg.
Siehe dazu das Foto mit der roten Schrift "letzte Worte"

Hier das Bild:

Unbenannt-2.jpg

Der CSS-Code schaut folgendermaßen aus:

@media screen {
/* ==================
   Grundeinstellungen
   ================== */
 html { overflow-y:scroll; /*Bildlaufleisten anzeigen,egal ob benötigt oder nicht*/
 		 height:100%;
		font-size:10px; /*für rem-Werte*/
		margin:0;
		padding:0;
		
		 }
 

 	
body {
	height:100%;
	font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
	color:#000;
	margin:0;
	padding:0;	
}

#wrapper {  position:relative; min-height:100%; width:100%;   }

#container {
	
	padding-bottom:50px; /*Höhe des Footer*/
	
}

#footer  {
	position:absolute;
	bottom:0;
	height:50px;
	
	width:100%;	
    background-color:#6bbc00;
	border-top:solid 5px #1c3144;

}



/* === Fullpage-Layout mit Ausrichtung in Mitte ===*/
#header .inside,
#container,
#footer .inside {
	 /* min-width:768px; Achtung: kleine Viewports läufts rüber */
	max-width:960px;
	margin:0 auto;
	padding:0 1em 0 1em;
}



p { color:#8c837e;
	font-size:2.9rem; }




 
/* === Header gestalten  ===*/

header { background-color:#6bbc00;
		border-bottom:solid 5px #1c3144;
		width:auto;
		height:100px;
}


header img.logo { 
	background-color:#fff;	
	border:solid 1px #1c3144;
	border-top:0px;
	border-radius:0 0 3px 3px;
	padding:7.0em 1.7em 1.0em 1.7em;
}
 
	 
	 
 } /*E n d e*/

Im Contao CSS-Framework sind aktiviert:
Layout-Builder
CSS-Reset
Responsives Layout

Statisches Layout ist nicht aktiviert.



Wie lässt sich das Problem lösen?

[Samuell]

Ein Link zum Problem würde es ungemein erleichtern :-)

Ja, Deine Version ist offline. Aber die hast Du in wenigen Minuten auch hinter einem htaccess online :-)

[derRenner]

Hallo,

schau mal hier lang
evtl. hilft dir das dein Problem ein wenig zu dämmen - ich verwende diesen Codesnipsel in dem einen oder anderen Projekt und klappt ganz gut

[Schnippel]

Ein Link zum Problem würde es ungemein erleichtern :-)

Ich hab das ganze CMS mal hochgeladen auf
http://www.test.qfg-quirla.de

[Contao-Academy]

Gib dem #footer

overflow:hidden

Gib dem #container noch ein Padding in Höhe des Footers:

padding-bottom: 50px

[Schnippel]

Gib dem #container noch ein Padding in Höhe des Footers:

Code:

padding-bottom: 50px

Das hat nich nicht funktioniert.

Aber mit

#container .inside { padding-bottom: 50px; }

geht es.

[Schnippel]

Habe aber noch eine weitere Frage:

was ist, wenn im Footer Elemente auf Grund vom Platz in der Höhe mehr brauchen als die 50px.
Ich denke hier an responsives Verhalten, wenn Elemente statt nebeneinander untereinander im Footer stehen sollen.

Ich habe bei obigen Beispiel mal Blindtext in den Footer eingearbeitet.
siehe dazu http://test.qfg-domain.de

in der mobilen Version habe ich den Footer von 50px überschrieben in

#footer { height:auto;  }

Hier das Ergebnis:

Mobile Version zeigt den Footer komplett, aber der Inhalt im Container fehlt

Unbenannt-1.jpg

In der Desktop-Version wird der Footer abgeschnitten, was sicherlich mit den Footer 50px Höhe zu tun hat.

Unbenannt-2.jpg

Nehme ich die 50px weg, dann gleiches Verhalten wie im Bild bei der mobilen Version..

[Contao-Academy]

EDIT: Sorry vergiss mein Post, hab vergessen die Screens anzusehen

Da hilft das min-height auch nicht

[Schnippel]

Thread entfernt, da es Probleme bei leeren Inhaltsbereich gab:


#################
Nachtrag zu obiger Lösung:
#################

Folgendes Problem:
Die obige Lösung funktioniert nicht, wenn der Inhaltsbereich leer ist.
Siehe Foto 15.jpg

Lösung:

Ich habe eine andere Lösung gefunden, die für Contao funktionert:

Responsiver Sticky-Footer und Fullpage-Layout

Siehe dazu https://community.contao.org/de/show...ullpage-Layout