|
|||
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; } Gruß Mufasa |
Sponsored Links |
|
|||
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. |
Sponsored Links |
|
|||
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) |
|
|||
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
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
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 |
|
|||
Zitat:
Deine min-height bei #maincontentcontainer ist wirkungslos, weil nicht alle Vorfahren eine Höhenangabe haben. Siehe dazu auch FAQ Punkt 4 Zitat:
Bitte erarbeite dir doch erstmal, was ich dir zu 100%-(Mindest-)Höhe genannt habe. Du kannst nicht alles auf einmal machen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
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) |
|
|||
Zitat:
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:
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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (11.10.2013 um 19:43 Uhr) |
|
|||
Zitat:
Zitat:
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:
Trotzdem, danke für Deine bisherigen Tipps. Schönen Gruß Geändert von Mufasa (11.10.2013 um 20:10 Uhr) |
Sponsored Links |
|
|||||||
Zitat:
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:
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:
Zitat:
Fortgeschrittenes: Siehe Signatur. Zitat:
Zitat:
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:
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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Stichwörter |
bootstrap, footer, grid, responsive, sticky |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |