HTML/CSS Footer immer sichtbar

[doug]

Hallo,

ich suche verzweifelt nach einer Möglichkeit ein footer div unter anderen divs immer anzeigen zu lassen.

Dokument wäre also so
div1
div2
div3
footerdiv

Ist das Browserfenster jetzt z.B. so hoch das Div1 und 2 angezeigt werden aber div 3 und footer nicht soll der footer am unteren Bildschirmrand stehen. Duch scrollen sollte dann bei festem footer am unteren Rand div2 und 3 eingescrollt werden können. Ist das Browserfenster aber höher als div 1 2 3 + footer müsste unter dem Footer ein nichts oder dummydiv angezeigt werden da alle divs fest aneinander bleiben sollen.

Hat jemand ne Idee!?

 

[tleilax]

Klingt so, als würdest Du nach der CSS-Anweisung "position: fixed" suchen.

 

[apolle]

https://de.selfhtml.org/css/eigenschaften/anzeige/position.htm

Als Meditationshilfe beim Rumscrollen die grüne Box ("f1 fixed") benutzen.

 

[doug]

Nein nicht fixed das wäre zu einfach.
Also wenn Div1 2 und 3 jeweils eine Höhe von 200px haben also zusammen 600px und der footer 100px, Ist das Browserfenster nun Höher 700px soll der Footer einfach nach Div3 kommen.
Ist das Browserfenter aber niedriger als 700px coll der Footer am unteren Browserrand sichtbar sein und die Divs je nach höhe hinter dem footer verschwinden.

 

[tleilax]

Dann musst Du vermutlich anhand von Media Queries zwei verschiedene Styles anbieten.

 

[doug]

uh ne das wäre fatal das muss sich schon automatisch so anordnen ich muß mal schauen ob mir jquery helfen kann.

 

[showme]

Hallo,

Du könntest es mit Javascript (jQuery) lösen und nach Laden der Seite die Container verschieben. Mit .height() die jeweiligen Containerhöhen über dem Footer ermitteln und entsprechend den Footer dann platzieren.

Viel Erfolg.

 

[tleilax]

uh ne das wäre fatal das muss sich schon automatisch so anordnen ich muß mal schauen ob mir jquery helfen kann.

Aber Du machst es doch von der Höhe des Browserfensters abhängig, wie die Darstellung erfolgen soll. Inwiefern wäre es dann fatal, bei < 700px ein anderes (oder zusätzliches) Stylesheet einzusetzen?

 

[apolle]

"Automatisch" ist ja ganz nett, aber ohne Abfrage der aktuellen Fenstergröße (screen.availHeight bzw. screen.availWidth wird es kaum gehen.

https://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=screen.availHeight

 

[doug]

prinzipiell könnte man 2 style sheets einsetzen, ich möchte aber auch wenn der Anwender das Fenster verkleinert das der Footer dann irgendwann unten stehen bleibt, ich bin gerade am fummeln ob ich das mit jquery hinbekomm. Im Endeffekt schalte ich ja dann auch nur den style des Footers um.

 

[tleilax]

Und ahmst damit also letztendlich die Funktionsweise von Media Queries nach. Die reagieren nämlich auch dynamisch, wenn man das Browserfenster verkleinert.

 

[doug]

ach so jetzt weis ich glaub ich was du meinst eine css für jeweils eine auflösung!? Hast du mal ein Beispiel!?

du meinst das hier? https://wiki.selfhtml.org/wiki/CSS/Media_Queries#device-height

schau ich mir mal an

 

[tleilax]

Ja, ganz genau das mein ich. Sorry, nächstes Mal packe ich den Link dazu.

 

[doug]

So habs hinbekommen
Danke tleilax der Tipp war prima ich stand nur erst mal auf dem Schlauch. Da ich aber Deine Kompetenz sehr zu schätzen weis hab ich nochmal nachgeforscht was du gemeint hast. Super Sache!

Die Lösung sieht jetzt so aus das im style media="(max-height: 888px)" der Footer untem fixiert wird.
Desweiteren gibt es noch ein Dummy div mit der Höhe des Footers.
Im normalen Style gibt es keine Fixierung und der Dummy wird mit 0 Höhe ausgeblendet.