Fixierter Footer, der sich mitscrollen lässt?

[FakE]

Guten Abend!

Schon einige Zeit beschäftigt mich ein dummes Problem.

Ich programmiere schon einige Jahre lang Control Panels,
andere Foren und bin an zahlreichen Projekten beteiligt.

Doch zur Zeit habe ich einige Design Probleme, die ich
selbst aber versuchte zu lösen und leider scheiterte.

Ich designe sehr oft neue Websiten, auch auf Kunden-
wünsche hin, scheitere momentan aber an einem bes. Designwunsch.


Website:

http://4future.bplaced.net/4future/


Beschreibung:

Der Footer, der unten zu sehen ist, kann ja mit position: absolute
und left: 0 und bottom: 0 unten am Bildrand gebunden werden.

Nun taucht das Problem auf, dass oben im Textfeld, bei zu langen
Texten, also zu vielen Zeilen, das Textfeld sich einfach über den
Footer drüber schiebt.

Beim Herunterscrollen der Website, bleibt der Footer dann nicht am
unteren Bildrand stehen, sondern scrollt sich mit hoch.


Was ich nun will:

Der Footer soll sich direkt und bündig am unteren Bildrand befinden,
doch wenn die Seite sehr hoch ist und man sie herunterscrollen
müsste, soll der Footer trotzdem immer am unteren Bildrand bleiben.


Hat von Euch jemand eine Idee, wie ich das Problem lösen kann?

Ich wäre auch für ein Gespräch im Teamspeak oder ICQ bereit, etc.

 

[threadi]

Du hast den falschen Foren-Bereich genutzt. Dir geht es um eine Darstellungsfrage. HTML ist nicht für die Darstellung zuständig sondern CSS. Ich habe deinen Beitrag daher verschoben.

Und die Antwort auf deine Frage ist

position: fixed;

 

[Skater]

Ich gkaube threadi hat das Problem nicht ganz verstanden.
Soweit ich die Situation einschätzen kann ist es so also nur mit Javascript lösbar.

Edit: oder du setzt den footer einfach ohne position unter den Maincontent. Im normalen Textfluss sozusagen

Edit 2: Falsch gelesen. threadis Lösung ist das, was du suchst..

 

[FakE]

Das der Beitrag ins falsche Thema gerutscht ist, tut mir leid.
Ich glaube nicht, dass ich das Problem nur mit CSS lösen kann.

Was position: fixed bewirkt, ist mir klar.
Doch ich selbst wollte auf etwas anderes heraus.

Der Footer soll prinzipiell gesehen immer am unteren Bildrand
befinden, doch nur, wenn der Textfluss von oben, klein genug
ist, nicht hinter oder vor dem Footer zu stehen.

Ist der Textfluss von oben so groß, dass ich die Website scrollen
müsste, um den Inhalt noch unten weiter zu verfolgen, soll der
Footer nicht am unteren Bildrand bleiben, sondern unter dem Textfluss
stehen.

Scrolle ich dann nach unten, sehe ich den Footer erst wieder.

Um das Problem nochmals zu verdeutlichen, habe ich unten einige
Screenshots hinzugefügt, die das Problem genauer umschreiben.

 

[djheke]

Was du suchst ist FooterSticky

* {
 margin:0;
 padding:0;
}

html , body , #wrapper { 
 height:100%;  /* WICHTIG */
} 
 
#wrapper { 
  margin-bottom:-100px;  /* WICHTIG */
}

#header {
 height:100px;
 background:#09c;
}

#main {
 float:left;  /* WICHTIG */
}


#footer {
 clear:both;  /* WICHTIG  WICHTIG */
 height:100px;
 background:#09c;
}

p {
 padding: 10px;
}

Sollte auch funktionieren.

 

[FakE]

Hmm...

Das funktioniert nur leider mit meinem Design nicht so richtig.

Die Tabellen, die ich alle umbauen müsste, eignen sich nicht
alle, um diese als DIVs umschreiben zu können.

Gibt es noch eine andere Möglichkeit?

 

[djheke]

Sorry, aber ich kann die Notwendigkeit eines Tabellen-Layouts nicht erkennen. Abgesehen deiner kleinen Statistik.
Noch ist ja nicht viel passiert und du kannst noch alles umstellen.
Wenn du nicht auf Tabellen verzichten willst, kannst du deiner übergeordneten Tabelle ja height 100% und min-height 100% geben. Sollte auch funktionieren.