✔ Positionierung eines Div's am unteren Seitenrand

qu1et · 3. Oktober 2005

Hallo,

Habe nun schon eine ganze Weile gefummelt und gewuselt und nichts entsprechendes gefunden, geschweige denn selber ein Workaround für mein kleines Problem gefunden.

Möchte den 'footer' (height: 150px

meiner Seite am unteren Rand des Browserfensters 'fixieren' - sprich: egal wie weit der User das Browserfenster aufzieht oder verkleinert, mein 'footer'-div soll immer am unteren Ende der Seite sitzen.

Kennt jemand eine Möglichkeit oder eine hilfreiche Ressource?

Danke im Voraus,
CM

Maik · 3. Oktober 2005

CSS-Code:

Code:

body
{
margin: 0;
padding: 0;
}

div#footer
{
position: absolute;
left: 0;
bottom: 0;
height: 150px;
width: 100%;
background: #dfdfdf;
}

[editpost]

Stu Nicholls demonstriert komplette und zudem ausgefeilte CSS-Layouts mit 'fixiertem' Footer, wie z.B.:

qu1et · 3. Oktober 2005

Jup... prima. Vielen Dank für Code und Link.

Gibt es eine Möglichkeit zu verhindern, dass der footer sich über den content in einem darüber befindlichen div schiebt? Habe ein 'container' div, welches je nach Menge des Inhalts in seiner Höhe variiert (height: auto

, nun soll der 'footer' unterhalb des 'container' div's dieses nicht überdecken, sobald das Browserfenster nicht groß genug ist, um den Inhalt der seite darzustellen.

Hier mal der aktuelle Code in Kurzform (der Einfachheit halber mal CSS und XHTML in einem):

Code:

... <body>
<div style="width: 100%; height: auto;">
cointainer_content
</div>

<div style="position: absolute; left: 0; bottom: 0; width: 100%; height: 150px;">
footer_content
</div>
</body> ...

Hoffe das Problem wird einigermaßen klar - ich versuchs noch mal direkter:

Wenn Browserfenster größer als Höhe des 'container' div's - soll der 'footer' am unteren Rand der Seite "kleben".
Sobald aber der 'container' höher ist als das Browserfenster, soll er (der 'footer') unterhalb des 'container' div's sitzen und man hat die möglichkeit via 'scrollen' das Seitenende und damit den 'footer' zu erreichen.

Denke das man mit "position: relative;" arbeiten muß, kriegs aber nicht zusammen.

Freue mich auf Anregungen und Hilfestellungen,
CM

Maik · 3. Oktober 2005

Vielleicht entspricht Gumbos CSS-Modell in dem Thread ... ein weiteres CSS Layout Problem deinen Vorstellungen?

son gohan · 3. Oktober 2005

Gib dem container div mal einen boder-bottom 150px oder/und margin-bottom 150px dann muss er den Abstand einhalten.

qu1et · 3. Oktober 2005

Dank an michaelsinterface für den Verweis und Gumbo für sein CSS-Modell.

Viele Grüsse & Haken drunter!

✔ Positionierung eines Div's am unteren Seitenrand

qu1et

Grünschnabel

Maik

qu1et

Grünschnabel

Maik

son gohan

Erfahrenes Mitglied

qu1et

Grünschnabel

Neue Beiträge