flexibler Footer

[Haines]

Moin,
ich habe ein spezielles Anliegen:

Ich möchte einen Footer realisieren,
der immer am unteren Fensterrand des Browsers ist,
aber nur so lange das Fenster kleiner als das
ihn umgebende div (Wrapper etc.) ist.
Wenn das Fenster größer als der Wrapper wird,
soll der Footer am unteren Rand des Wrappers bleiben,
und nicht um unteren Rand des Fensters.

Hat jmd vielleicht eine Idee?

Viele Grüße
Haines

[Gunnar Bittersmann]

@@Haines:

nuqneH

Ich möchte einen Footer realisieren,
der immer am unteren Fensterrand des Browsers ist,
aber nur so lange das Fenster kleiner als das
ihn umgebende div (Wrapper etc.) ist.

Nennt sich „sticky footer“. Unter dem Suchbegriff solltest du fündig werden.

Ohne JavaScript ist da wohl nur was mit Flexbox zu machen. Beispiel.

Qapla'

[Baba]

Ohne JavaScript ist da wohl nur was mit Flexbox zu machen. Beispiel.

Warum?

Cheers,
Baba

[Haines]

Ohne JavaScript ist da wohl nur was mit Flexbox zu machen. Beispiel.

Warum?

Cheers,
Baba

Jungs, danke schon mal für die Hilfe.
Das kannte ich aber schon.
Was ich suche ist eine Möglichkeit,
folgendes zu realisieren:

Wenn das Fenster sehr klein ist,
klebt der Footer am unteren Rand.
Wenn ich es größer mache, wandert der Footer mit nach unten.
(Klebt ja erst mal an der Unterkante).
Wird es noch größer, stoppt der Footer
an der Unterkante des Wrappers (o.ä. div Box),
und bleibt dort kleben,
egal wie groß das Fenster noch werden könnte.

[Martin Rettberg]

Warum willst du den Platz für deinen Content durch deinen Footer bei kleinen Viewportgrößen noch zusätzlich künstlich verkleinern?
Solltest du wider Erwarten einen guten Grund dafür haben, könntest du mit Media Queries auf unterschiedliche Höhen des Viewports reagieren und deinen Footer entsprechend fixieren.

[Haines]

Warum willst du den Platz für deinen Content durch deinen Footer bei kleinen Viewportgrößen noch zusätzlich künstlich verkleinern?
Solltest du wider Erwarten einen guten Grund dafür haben, könntest du mit Media Queries auf unterschiedliche Höhen des Viewports reagieren und deinen Footer entsprechend fixieren.

Vielen Dank Martin,
dein Tip war ein Volltreffer.

Der Footer ist halb transparent und soll immer sichtbar sein,
weil er Kurzinfos enthält.

[Gunther]

Hallo!

Solltest du wider Erwarten einen guten Grund dafür haben, könntest du mit Media Queries auf unterschiedliche Höhen des Viewports reagieren und deinen Footer entsprechend fixieren.

dein Tip war ein Volltreffer.

Das kann ich mir nur schwer vorstellen, denn dazu müsstest du ja die Höhe deines vorhergehenden Contents kennen. Das ginge imho nur per CSS und dann braucht man keine MQ ...!

Der Footer ist halb transparent und soll immer sichtbar sein,
weil er Kurzinfos enthält.

Wozu die Transparenz ...?

Warum pappst du ihn dann nicht gleich per position:fixed unten fest?

Gruß Gunther

[Gunther]

Sorry, Schreibfehler ...!

Das kann ich mir nur schwer vorstellen, denn dazu müsstest du ja die Höhe deines vorhergehenden Contents kennen. Das ginge imho nur per CSS und dann braucht man keine MQ ...!

Sollte natürlich heißen:
Das kann ich mir nur schwer vorstellen, denn dazu müsstest du ja die Höhe deines vorhergehenden Contents kennen. Das ginge imho nur per Javascript und dann ...

Gruß Gunther

[Martin Rettberg]

Das kann ich mir nur schwer vorstellen, denn dazu müsstest du ja die Höhe deines vorhergehenden Contents kennen. Das ginge imho nur per Javascript und dann ...

So wie ich ihn verstanden habe, soll der Footer ruhig über dem Content liegen, allerdings nur bei einer bestimmten Display-/Fensterhöhe.