nicht angemeldet
Footer fast immer am unteren Browser-Rand
AugeIch habe mich nun vom Tabellen-Layout abgewandt und möchte nun das Layout mit CSS gestalten. Der Entwurf, der umzusetzen ist sieht folgend aus:
----------------------------
| Header (height:90px) |
----------------------------
| |
| Content (height:*) |
| |
| |
| |
----------------------------
| Footer (height:40px) |
----------------------------
Jeder Bereich (Header, Content, Footer) ist jeweils ein DIV-Element.
Das Ziel ist es, wenn der Inhalt nicht das Browser-Ende erreicht, soll der restliche Platz mit der Hintergrundfarbe gefüllt werden bis der Footer mit dem Browser endet.
Geht nun der Inhalt über das Browser-Fenster hinaus soll auch der Footer mitwandern und erst beim Runterscrollen zu sehen sein.
Theoretisch soetwas wie bei einer Tabelle (Höhe: 100%), bei der die Zeile ohne Höhenangabe so lang gezogen wird, bis die Tabelle die angegebene Höhe erreicht hat.
Danke!
-
Wieso nicht gleich mit einer Tabelle? Wäre doch von der Struktur her prädestiniert für so ein Layout.
Wie ist der Footer bisher definiert? Nur höhenmäßig?
-
Hallo
Wieso nicht gleich mit einer Tabelle? Wäre doch von der Struktur her prädestiniert für so ein Layout.
Warum das denn? Drei einander folgende Elemente, die untereinander dargestellt werden, entsprechen allem anderen als meinem Verständnis einer Tabelle.
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1
-
-
Hallo
Header (height:90px) Content (height:*)
Footer (height:40px) Jeder Bereich (Header, Content, Footer) ist jeweils ein DIV-Element.
Das Ziel ist es, wenn der Inhalt nicht das Browser-Ende erreicht, soll der restliche Platz mit der Hintergrundfarbe gefüllt werden bis der Footer mit dem Browser endet.Der Footer endet mit dem Browser? Liest sich ja gut. :-)
Einfach mit einer Höhenangabe für den Content ist es leider nicht getan, da du nicht weißt, wie groß/hoch der Anzeigebereich des Browsers des Besuchers (Viewport) ist. Du kannst diese per JavaScript ermitteln und die Höhe -Header -Footer errechnen und #Content zuweisen lassen. funktioniert natürlich nicht, falls kein JavaScript zur Verfügung steht.
Du kannst auch die Hintergrundfarbe an <body> vergeben und den Footer per
position:fixed;am unteren Browserrand festnageln. er wird dann immer dort angezeigt, egal wie viel Content in Content steht. Funktioniert widerum nicht im MSIE <= 6.Geht nun der Inhalt über das Browser-Fenster hinaus soll auch der Footer mitwandern und erst beim Runterscrollen zu sehen sein.
Dann wäre es am besten, Content eine
min-height:...;zu geben. Für den MSIE <= 6 musst du aberheight:...;einfügen und vor moderneren Browsern verstecken. Dazu kann man z.B. Conditional Comments verwenden.Damit kann man eine Mindesthöhe erzwingen. Ob diese nun genau dem entspricht, was du willst, weißt selbst du nicht. Du kannst keine konkrete Aussage zum Viewport beim Besucher machen. In Kombination mit der dynamischen Anpassung der Höhe per JavaScript kannst du aber die meisten Besucher mit graphischem Browser erreichen. Wenn dann noch wer etwas scrollen muss, um den Inhalt des Footers zu erreichen, seis drum. Daran wird niemand sterben.
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1 -
Hallo,
Ich habe mich nun vom Tabellen-Layout abgewandt und möchte nun das Layout mit CSS gestalten. Der Entwurf, der umzusetzen ist sieht folgend aus:
Header (height:90px) Content (height:*)
Footer (height:40px) Jeder Bereich (Header, Content, Footer) ist jeweils ein DIV-Element.
Das Ziel ist es, wenn der Inhalt nicht das Browser-Ende erreicht, soll der restliche Platz mit der Hintergrundfarbe gefüllt werden bis der Footer mit dem Browser endet.
Geht nun der Inhalt über das Browser-Fenster hinaus soll auch der Footer mitwandern und erst beim Runterscrollen zu sehen sein.Okay, also keine fixen Kopf- und Fussleisten, dass erleichert die Sache.
Die Lösung sollte in etwa wie folgt aussehen: Du gibtst html und body erst mal 100% Höhe. Header und Content schließt in einem weiteren Div ein. Dieses Div-Element bekommt, wie von Auge vorgeschlagen eine Mindesthöhe von 100% + Extrawurst für den IE. Der Footer bekommt dann eine negative margin-top, in deinem Fall 40px. Das sollte es gewesen sein.
Kleiner Tipp noch: Falls möglich solltest du auf die Pixelangaben verzichten und deine Maße in einer relativen Einheit, z.B. em angeben.
Gruß
Stareagle