Footer fix mit variabler Höhe

[Efchen]

Moin,

nur nochmal sicherheitshalber nachgefragt, weil ich dazu nichts finde...
einen Footer, der immer am unteren Viewportrand klebt (postion:fixed; bottom:0), der aber eine variable height haben kann (weil er durch Schriftvergrößerung mehrzeilig wird) und trotzdem den Content nicht überdeckt...gibts das? Das ist doch das 100%-*px-Problem, das sich nicht lösen lässt, oder?

Übersehe ich was?

Wie löst Ihr solch ein Problem? Mit großem Abstand am Ende des Contents? Mit fixer Höhe des Footers (bäh)?

Danke,
-Efchen

 

[prm]

Am einfachsten geht's, wenn der Footer eine fixe Höhe hat.
Überlappungen kannst du dann mit entsprechenden margin- oder padding-Werten vom Content vermeiden.

Eine Lösung für eine variable Footerhöhe habe ich leider nicht parat. :(
Oder eben - wie du bereits erwähntest - vorsorglich einen höheren margin/padding verwenden, in der Hoffnung, dass es für variable Footerhöhe ausreicht.

 

[Efchen]

Nee, eine fixe Höhe hat er eben nicht. Wenn man die Schrift vergrößert, wird der Footer irgendwann zweizeilig. Mit maximaler Vergrößerung und kleinem Viewport wird er sogar 6 oder 7-zeilig.

Dann kann man also wirklich nur dem Content einen großen Abstand nach unten zuweisen.

Na gut, danke, das hab ich ja schon vermutet.

 

[neuroleptika]

Nee, eine fixe Höhe hat er eben nicht. Wenn man die Schrift vergrößert, wird der Footer irgendwann zweizeilig...

Dann brauchst du eine Mindesbreite (in em).
Die Höhe mußt du umbedingt wissen.

 

[Efchen]

MindestBREITE? Hm?

Die Höhe weiß ich aber eben nicht. Also ist das Vorhaben unlösbar. Und man riskiert bei größeren Schriften entweder, dass der Content nicht voll sichtbar ist oder der Footer. Und wenn im Footer der Link aufs Impressum steht, der Inhalt des Footers bei fixer Höhe des Footers unten aus dem Bild raus verschwindet, sind dann die Anforderungen nach TMG nicht mehr erfüllt? :-)

 

[Bernhard]

Hallo Efchen,

MindestBREITE? Hm?

Die Höhe weiß ich aber eben nicht. Also ist das Vorhaben unlösbar.

Es gibt eine unschöne Lösung: Du kannst den selben Text nochmal in den Content schreiben.
Der verschwindet dann unsichtbar hinter dem Footer, stellt aber gleichzeitig sicher, dass der
restliche Inhalt von Content sichtbar bleibt. Semantisch und für Vorlesebrowser ist das aber
eine Katastrophe.

Ich hätte noch einen Lösungsansatz im Kopf, den ich aber erst ausprobieren möchte...

Und man riskiert bei größeren Schriften entweder, dass der Content nicht voll sichtbar ist oder der Footer. Und wenn im Footer der Link aufs Impressum steht, der Inhalt des Footers bei fixer Höhe des Footers unten aus dem Bild raus verschwindet, sind dann die Anforderungen nach TMG nicht mehr erfüllt? :-)

Das kommt wohl ein bisschen drauf an...
Es gab auch schon ein Gerichtsurteil, das sinngemäß lautete, dass „leicht erkennbar,
unmittelbar erreichbar und ständig verfügbar” bedeuten würde, dass der Link unabhängig
von der Größe des Browserfensters ohne Scrollen erreichbar sein müsse...
Danach wären wir nur auf der sicheren Seite, wenn wir den Link immer ganz oben links
anbringen...

Grüße
Bernhard

P.S.: IE6 kennt fixed nicht!

 

[Efchen]

Du kannst den selben Text nochmal in den Content schreiben. Der verschwindet dann unsichtbar hinter dem Footer ... Semantisch und für Vorlesebrowser ist das aber eine Katastrophe.

Auf Semantik kommt es in dieser Website wirklich nicht an und Suchmaschinen werden die auch nicht durchsuchen. Und auch Vorlesebrowser kommen wohl eher nicht zum Einsatz. Aber würde ein Vorlesebrowser "visibility:hidden" beachten? Denn dann nimmt das den notwendigen Platz ein, wird aber nicht dargestellt.

[/quote]Es gab auch schon ein Gerichtsurteil, ... dass der Link unabhängig
von der Größe des Browserfensters ohne Scrollen erreichbar sein müsse...[/quote]
Ich kenn das nur mit "Maximal 2 Seiten blättern".
Aber in dieser Website macht das nichts aus, es ist eine reine Kundenseite mit Benutzern und jeder Nutzer weiß, wer der Betreiber ist.

Das war mal ne rein theoretische Frage.

 

[Bernhard]

Auf Semantik kommt es in dieser Website wirklich nicht an...

;Jump Nanana, Du überraschst immer wieder: sonst predigst Du immer,
dass man die Semantik nie außer acht lassen sollte...;Jump

...und Suchmaschinen werden die auch nicht durchsuchen. Und auch Vorlesebrowser kommen wohl eher nicht zum Einsatz. Aber würde ein Vorlesebrowser "visibility:hidden" beachten? Denn dann nimmt das den notwendigen Platz ein, wird aber nicht dargestellt.

hidden würde das ganze zumindest schonmal besser machen...
Es gab neulich im OffTopic den Thread zu den Vorlesebrowsern, da hieß es,
dass diese sehr umfangreiche Einstellmöglichkeiten haben. Da ich mir immer
noch keinen installiert habe, mutmaße ich, dass man auch das einstellen kann...

Es gab auch schon ein Gerichtsurteil, ... dass der Link unabhängig
von der Größe des Browserfensters ohne Scrollen erreichbar sein müsse...

Ich kenn das nur mit "Maximal 2 Seiten blättern".
Aber in dieser Website macht das nichts aus, es ist eine reine Kundenseite mit Benutzern und jeder Nutzer weiß, wer der Betreiber ist.

Das war mal ne rein theoretische Frage.

Ich müsste danach suchen, da ich mir das Aktenzeichen nicht gemerkt habe.
Auf das "maximal zwei Seiten blättern" verlasse ich mich nicht und bringe den
Link grundsätzlich auf jeder Seite an und schreibe auch immer "Impressum" drauf.
Allerdings habe ich ihn auf meiner eigenen Seite auch im Footer, der fixed ist und
eine Mindestbreite hat...

Grüße
Bernhard

 

[neuroleptika]

MindestBREITE? Hm?

Die Höhe lässt sich mit einer Mindestbreite kontrollieren, da du die Zeilenumbrüche dann einigermaßen vorhersehen kannst.

 

[Loon3y]

einen Footer, der immer am unteren Viewportrand klebt (postion:fixed; bottom:0), der aber eine variable height haben kann (weil er durch Schriftvergrößerung mehrzeilig wird) und trotzdem den Content nicht überdeckt...

hoffe ich habe es nicht falsch verstanden...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
h1 { border: 1px solid; width: 80%; }
#content { width: 80%; height: 20em; border: 1px solid; position: relative; z-index: 2; }
#footer { width: 80%; height: 2em; border: 1px solid; position:fixed; bottom:0em; background-color: #00CC00; z-index:1;}
p { padding: 0px; margin: 0px; }
</style>
</head>
<body>
<h1> Ich bin der Header </h1>

<div id="content">
<h2> Ich bin Inhalt 1 </h2>
<p> inhalt 1 </p>
<p> inhalt 1 </p>
<p> inhalt 1 </p>
<p> inhalt 1 </p>
<p> inhalt 1 </p>
<p> inhalt 1 </p>
<p> inhalt 1 </p>
<p> inhalt 1 </p>
<p> inhalt 1 </p>
<p> inhalt 1 </p>
<p> inhalt 1 </p>
<p> inhalt 1 </p>
</div>

<!-- footer -->
<div id="footer"> 
<p> test test test test test test test test</p>
 </div>
</body>
</html>

Edit: das height beim footer kann man auch weglassen..habs nur mal jetzt rein gemacht..

 

[Efchen]

Nanana, Du überraschst immer wieder: sonst predigst Du immer, dass man die Semantik nie außer acht lassen sollte...

Das ist nichts, was ich jetzt ernsthaft beantworten muss, oder? ;-)

Die Höhe lässt sich mit einer Mindestbreite kontrollieren, da du die Zeilenumbrüche dann einigermaßen vorhersehen kannst.

Versteh ich grad überhaupt nicht. Wenn ich sowieso Breite 100% habe, was nützt mir dann eine Mindestbreite? Und wenn ich jetzt an einen Fließtext denke, dann weiß ich auch nur bei einer bestimmten Schriftgröße, wieviele Zeilen das dann haben kann mit der Mindestbreite. Aber je größer die Schrift, desto mehr Zeilen gibt es auch wieder.

#content { width: 80%; height: 20em; border: 1px solid; position: relative; z-index: 2; }
#footer { width: 80%; height: 2em; border: 1px solid; position:fixed; bottom:0em; background-color: #00CC00; z-index:1;}

Da würde irgendwann der Content den Footer überdecken. Ist also gehopst wie gesprungen.

 

[Loon3y]

Da würde irgendwann der Content den Footer überdecken. Ist also gehopst wie gesprungen.

Ja deswegen wunderts mich ja auch wegen dem was du geschrieben hattest *g* hmm..

sprich du willst footer unten, content oben, aber beides darf nicht überlagern? hmpf....also soviel wie ich weiß, was sicherlich weniger ist wie du, geht das nicht...bzw noch nicht.. :|