zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Sticky-Footer: Wie Footer ganz nach unten drücken?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.10.2013, 17:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 42
Mufasa befindet sich auf einem aufstrebenden Ast
Standard Sticky-Footer: Wie Footer ganz nach unten drücken?

Hallo allerseits,

ich bin gerade dabei eine neue Seite auf Basis des "Responsive Grid System" zu bauen. Dabei habe ich aber das Problem, dass mein Footer nicht ganz runter an den Rand will

Hier der Problemfall: Konzeptseite

Das ganze soll aber so aussehen: Sticky Footer with bootstrap

Das ist der CSS-Code:
Code:
        /* Wrapper for page content to push down footer */
	#maincontentcontainer {
		width: 100%;
		min-height: 100%;
		height: auto !important;
		height: 100%;
		/* Negative indent footer by its height */
		margin: 0 auto -40px;
		/* Pad bottom by footer height */
		padding: 0 0 40px;
		box-sizing: border-box;
		border: 5px dotted red;
	}

	#footercontainer {
		width: 100%;
		height: 40px;
		border-top: 2px solid #D1BF00;
		background-color: #030237;
		position: absolute;
		margin-bottom: 0;
		bottom: 0;
	}
Würde mich über jede Hilfe sehr freuen.

Gruß
Mufasa
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.10.2013, 17:48
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Du musst statt position:absolute die Eigenschaft position:fixed nehmen.

Ausserdem hast du durch das width:100% immer eine horizontale Bildlaufleiste drin, wenn der Inhalt höher als der Viewport ist. Das kannst du umgehen in dem du das width weglässt und dem header stattdessen left:0px und right:0px gibst, damit er sich in die volle Breite aufzieht.

Blockelemente haben automatisch die volle Breite, solange sie im Fluss der Elemente sind.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.10.2013, 18:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 42
Mufasa befindet sich auf einem aufstrebenden Ast
Standard

Hey explanator Danke für die schnelle Antwort.

Ok, das mit dem width mach ich gleich, das ist schon mal sehr gut

Aber beim footer position:fixed heißt ja dann, dass dieser immer am unteren Ende sichtbar ist, auch wenn die Seite vertikal länger ist als der viewport. Das soll ja nicht so sein. Deswegen hatte ich das mit dem maincontentcontainer machen wollen, dass dieser den footer runter drückt (wie beim bootstrap-Beispiel, dort heißt es "wrap" in Zeile 28 ).

Weißt Du wie ich meine? Also bei weniger Inhalt soll es am unteren Rand sein, bei mehr Inhalt eben unter dem Inhalt, sodass es beim ganz hoch scrollen am unteren Rand stehen bleibt.

Geändert von Mufasa (11.10.2013 um 18:26 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 11.10.2013, 18:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Du vermischst zwei Techniken für einen "sticky footer". "FooterStick" mit abs. Pos. des Footers und "FooterStickAlt" ohne abs. Pos. (siehe auch FAQ).
Da du selbst auf ein Beispiel ohne abs. Pos. verlinkt hast: Lass die abs. Pos. weg und schau dir bitte dort nochmal genau an
  • welche Beziehung die Elemente im HTML-Quelltext zueinander haben
  • welche Elemente height und min-height haben.
Mit Zitat antworten
  #5 (permalink)  
Alt 11.10.2013, 19:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 42
Mufasa befindet sich auf einem aufstrebenden Ast
Standard

Hmmm....hab mich schon gedacht, dass ich da wohl was vermischt habe. Jetzt hab ich nochmal verglichen und denke soweit ist das bei mir jetzt ziemlich ähnlich.... aber trotzdem klappt das nicht so wie es soll

Das nächste Problem (warum ich da die absolute Positionierung gemacht hatte) ist, dass ich da eigentlich auch ein Full-Screen-Background habe und das dann sonst den ganzen Inhalt und Footer überdeckt. Hier hab ich das mal eingefügt: Konzeptseite mit Background

Kannst Du mir bitte zeigen wo ich da den Denkfehler habe? Ich komme einfach nicht drauf und hänge hier jetzt schon seit zwei Tagen dran....

Geändert von Mufasa (11.10.2013 um 19:24 Uhr) Grund: Link korrigiert
Mit Zitat antworten
  #6 (permalink)  
Alt 11.10.2013, 19:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Mufasa Beitrag anzeigen
Hmmm....hab mich schon gedacht, dass ich da wohl was vermischt habe. Jetzt hab ich nochmal verglichen und denke soweit ist das bei mir jetzt ziemlich ähnlich.... aber trotzdem klappt das nicht so wie es soll
Es fehlen noch immer die nötigen height-Angaben.
Deine min-height bei #maincontentcontainer ist wirkungslos, weil nicht alle Vorfahren eine Höhenangabe haben.
Siehe dazu auch FAQ Punkt 4

Zitat:
Das nächste Problem [...] Konzeptseite mit Background
Der Link ist kaputt.
Bitte erarbeite dir doch erstmal, was ich dir zu 100%-(Mindest-)Höhe genannt habe. Du kannst nicht alles auf einmal machen.
Mit Zitat antworten
  #7 (permalink)  
Alt 11.10.2013, 19:32
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 42
Mufasa befindet sich auf einem aufstrebenden Ast
Standard

Ah ok, wusste nicht, dass sowas nur wirkt wenn auch die vorhergehenden eine Höhenangabe haben. Allerdings ist das bei manchen vorhergehenden auch beabsichtigt, weil sich diese an den Inhalt anpassen sollen. Bei der Seite, die Du verlinkt hast steht "sonst geht es zu den Grosseltern usw. bis zum <body>". Mein body hat aber eine height-Angabe mit 100%. Oder müssen alle vorhergehenden Elemente eine Höhenangabe haben?

Edit:
Ich sehe gerade, eigentlich haben ja doch alle vorhergehenden Elemente eine Höhenangabe. Vor dem #maincontentcontainer ist nur noch der #headcontainer, welcher aber duch position:fixed; aus dem Fluss genommen ist. Denke ich mal Und <body> hat height:100%.

Hab den zweiten Link jetzt korrigiert
Konzeptseite mit Background

Geändert von Mufasa (11.10.2013 um 19:38 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 11.10.2013, 19:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Edit:
Ich sehe gerade, eigentlich haben ja doch alle vorhergehenden Elemente eine Höhenangabe. Vor dem #maincontentcontainer ist nur noch der #headcontainer, welcher aber duch position:fixed; aus dem Fluss genommen ist. Denke ich mal Und <body> ist auf 100%
Vorfahren, nicht "vorhergehende Elemente".
Der #headcontainer ist kein Vorfahre von #maincontentcontainer. Aber #wrapper ist einer.
Und body hat auch noch einen Vorfahren, der heißt html.
Das Verständnis für die Beziehungen zwischen den Elementen gehört zu den absoluten Grundlagen. Bitte belies dich dazu.

Zitat:
Hab den zweiten Link jetzt korrigiert
Konzeptseite mit Background
Da ist kein Background, sondern ein img-Element, das über allem anderen fix positioniert wird. Was willst du wissen? Warum es über allem anderen liegt? Belies dich zur z-index-Eigenschaft.

edit: Das Bild ist mit 2.5MB ungeeignet für die Verwendung im Web.

Welches Buch liest du, um CSS zu lernen? Ich habe das Gefühl, dass du nur Ratespiele betreibst.

Geändert von fricca (11.10.2013 um 19:43 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 11.10.2013, 20:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 42
Mufasa befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Vorfahren, nicht "vorhergehende Elemente".
Der #headcontainer ist kein Vorfahre von #maincontentcontainer. Aber #wrapper ist einer.
Und body hat auch noch einen Vorfahren, der heißt html.
Das Verständnis für die Beziehungen zwischen den Elementen gehört zu den absoluten Grundlagen. Bitte belies dich dazu.
Ok, den Begriff Vorfahre kannte ich jetzt so gar nicht, deswegen habe ich das verwechselt. Was Du Vorfahre nennst, nenne ich (und alle anderen, die ich kenne) "Elternelement(e)".

Zitat:
Zitat von fricca Beitrag anzeigen
Da ist kein Background, sondern ein img-Element, das über allem anderen fix positioniert wird. Was willst du wissen? Warum es über allem anderen liegt? Belies dich zur z-index-Eigenschaft.
Ja nun, das ist ein img-Element, das hier als Full-Screen-Background dient. Deswegen so gemacht, weil ein "normales" Background-Bild nicht immer im Mittelpunkt bleibt bei Größenänderung des Viewports. Jetzt passt es auch... habe dem Wrapper ein höheres z-index gegeben.

Zitat:
Zitat von fricca Beitrag anzeigen
edit: Das Bild ist mit 2.5MB ungeeignet für die Verwendung im Web.
Ja, das wird auch nicht das richtige Background-Bild sein... hab ich jetzt einfach nur zum Testen reingetan.

[Back to topic]
Dem Wrapper hab ich jetzt auch ein height:100% gegeben, damit dieser auch eine Höhenangabe hat.... wie Du geschrieben hast. Trotzdem kein Wirkung.

Zitat:
Zitat von fricca Beitrag anzeigen
Welches Buch liest du, um CSS zu lernen? Ich habe das Gefühl, dass du nur Ratespiele betreibst.
Nun, wenn Du mir ein gutes Buch empfehlen kannst, immer gerne. Aber ich bin mir sicher, dass auch Du nicht ALLES weißt und mit Sicherheit auch mal irgendwo hängst, was für andere vielleicht simpel erscheint. Daher finde ich es ehrlich gesagt nicht in Ordnung hier so hochnäsig aufzutreten wenn jemand um Hilfe fragt. Dafür ist ein Forum doch da! Für gegenseitigen Austausch und nicht dafür andere bei eventuellem Nichtwissen oder Fehler runter zu machen.

Trotzdem, danke für Deine bisherigen Tipps.

Schönen Gruß

Geändert von Mufasa (11.10.2013 um 20:10 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.10.2013, 20:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Mufasa Beitrag anzeigen
Ok, den Begriff Vorfahre kannte ich jetzt so gar nicht, deswegen habe ich das verwechselt. Was Du Vorfahre nennst, nenne ich (und alle anderen, die ich kenne) "Elternelement(e)".
Eltern sind nur die unmittelbaren Vorfahren. Wenn ich diese meine, dann schreibe ich Eltern.
Ich meine aber alle Vorfahren. Dazu gehören Großeltern und Urgroßeltern und ... Die haben noch immer nicht alle die nötige height-Angabe. Bitte lies meinen vorherigen Beitrag nochmal ganz genau.
Und wenn du das dann geschafft hast, wirst du sicher feststellen, dass dein Footer noch immer nicht da sitzt, wo du ihn gerne hättest. Das liegt daran, dass #maincontentcontainer nicht nur 100% hoch ist. Und der Footer nicht nur 40px. Du wirst sicher selbst drauf kommern, warum das so ist.

Zitat:
Ja nun, das ist ein img-Element, das hier als Full-Screen-Background dient. Deswegen so gemacht, weil ein "normales" Background-Bild nicht immer im Mittelpunkt bleibt bei Größenänderung des Viewports.
Ein Hintergrundbild kann man über die Eigenschaft background-position in die Mitte setzen. Es ist unverständlich, was du meinst.
Als background-image hat es zusätzlich den großen Vorteil, dass man per Media-Queries auf den verfügbaren Platz reagieren kann und Bilder in dazu passender Größe verwenden kann.

Zitat:
Jetzt passt es auch... habe dem Wrapper ein höheres z-index gegeben.
Und warum hast du dem Bild überhaupt einen z-index gegeben?


Zitat:
Nun, wenn Du mir ein gutes Buch empfehlen kannst, immer gerne.
Buchempfehlung für Grundlagen: »Little Boxes« - HTML und CSS lernen - als Buch und Videotraining - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller)
Fortgeschrittenes: Siehe Signatur.
Zitat:
Aber ich bin mir sicher, dass auch Du nicht ALLES weißt und mit Sicherheit auch mal irgendwo hängst, was für andere vielleicht simpel erscheint.
Sicher weiß ich nicht alles. Aber ich habe noch nie kostenlosen Support in einem Forum erwartet.

Zitat:
Daher finde ich es ehrlich gesagt nicht in Ordnung hier so hochnäsig aufzutreten wenn jemand um Hilfe fragt.
Ich möchte dich darauf aufmerksam machen, dass sich deine Probleme aus mangelnden Grundlagenkenntnissen ergeben. Bei HTML und CSS reicht es nicht, Versatzstücke von irgendwoher zusammenzukopieren. Man muss wirklich jede einzelne Zeile verstehen, die man verwendet.
Wer heute in diesen Bereich einsteigt, hat den großen Vorteil, dass es viel Literatur gibt.
Fertig mit dem Lernen ist man aber nie.

Zitat:
Dafür ist ein Forum doch da! Für gegenseitigen Austausch und nicht dafür andere bei eventuellem Nichtwissen oder Fehler runter zu machen.
Findest du, hier findet ein "Austausch" statt? Das würde doch eher gegenseitiges "Geben" und "Nehmen" bedeuten. Bisher habe ich dich aber nur als "Nehmenden" wahrnehmen können.
Hier bekommst du in erster Linie Hilfe zur Selbsthilfe. Das fordert in erster Linie dich als denjenigen, der Hilfe möchte. Du kannst dir auch ruhig Zeit lassen bei der Beschäftigung mit all dem, was du hier als Hinweis bekommst.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
bootstrap, footer, grid, responsive, sticky

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Sticky Footer Problem - Scrollbar img CSS 5 05.03.2011 18:51
Sticky Footer Problem brainspace CSS 4 17.11.2010 19:37
Sticky Footer klebt auf der Seite beim Scrollen nicolafw CSS 5 01.11.2010 13:26
Grundsatzfrage - Sticky Footer Manfred62 CSS 2 07.10.2010 00:18
Flüssiges Layout MIT Sticky Footer BabbleBoy CSS 12 11.02.2007 21:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:59 Uhr.