Footer am Ende der Seite

[Thomas]

Hallo!

Mein Problem ist, dass ich mit CSS einen DIV-Container habe, den ich zentriert habe und der einen Rahmen hat. Nun möchte ich in diesem Container eine Footer Zeile die am Ende der Seite steht und in den Rahmen des Containers eingeschlossen ist.

div#box {
 margin: 0 auto;
 width: 1000px;
 border: 3px solid #880000;
}
div#footer {
 position: absolute;
 bottom: 0;
}
<div id="box">
Test
 <div id="footer">
  Test
 </div>
</div>

Der Footer steht zwar am Ende der Seite aber er ist nicht in dem Rahmen des "Box" Containers eingeschlossen.

Kann mir jemand helfen?

Gruß Thomas

[Detlef G.]

Hallo Thomas

Der Footer steht zwar am Ende der Seite aber er ist nicht in dem Rahmen des "Box" Containers eingeschlossen.

Lies mal position (Positionsart) und dort ganz genau, was unter Erläuterung
bei absolute steht.

Auf Wiederlesen
Detlef

[Thomas]

Lies mal position (Positionsart) und dort ganz genau, was unter Erläuterung
bei absolute steht.

Ok, hast du eine Idee wie ich es mache, dass der Footer am Ende steht und in dem Rahmen eingeschlossen ist?

Gruß Thomas

[Hopsel]

Hi Thomas!

Lies mal position (Positionsart) und dort ganz genau, was unter Erläuterung
bei absolute steht.
Ok, hast du eine Idee wie ich es mache, dass der Footer am Ende steht und in dem Rahmen eingeschlossen ist?

Vielleicht solltest du auch lesen, was bei relative steht. -.-

MfG H☼psel

[Thomas]

Vielleicht solltest du auch lesen, was bei relative steht. -.-

Ja dann steht es zwar in dem Rahmen aber nicht mehr am Ende der Seite ;-)

Gruß Thomas

[Smartiie]

Hallo Thomas,

versuche mal Foglendes:
Füge den Footer als letztes Element in die div#box-Ebene ein.

Wie Detlef sagte:
Wenn der Footer als letztes innerhalb von #box steht, dann steht er doch
von ganz allein am unteren Rand innerhalb des Rahmens.

Du brauchst also für den Footer keine eigenen DIV-Rahmen. Formatiere einfach den Absatz entsprechend. (Der Absatz-Tag hat eine eigene Box.) Es sei denn, Du willst mit dem DIV z.B. mehreren Absätzen eine einheitliche Formatierung geben. In diesem Fall lasse für den Footer-Div einfach die CSS-Angaben zur Positionierung weg, und es sollte klappen ...

Viele Grüße
Wulf

[Detlef G.]

Hallo Thomas

div#box {
margin: 0 auto;
width: 1000px;
border: 3px solid #880000;
}

Du hast also keine Höhe angegeben.

div#footer {
position: absolute;
bottom: 0;
}

Warum positionierst du den Footer dann absolut?

<div id="box">
Test
<div id="footer">
  Test
</div>
</div>

Wenn der Footer als letztes innerhalb von #box steht, dann steht er doch
von ganz allein am unteren Rand innerhalb des Rahmens.

Auf Wiederlesen
Detlef

[Thomas]

div#box {
margin: 0 auto;
width: 1000px;
border: 3px solid #880000;
}

Du hast also keine Höhe angegeben.

Nein weil der Container so hoch wie die Höhe eines Bildschirms sein soll, falls dieser größer als der Inhalt ist.

Gruß Thomas

[Thomas]

Ich glaube ich habe mein Problem schlecht erklärt also versuch ichs nochmal. Ich möchte eine Box mit Rahmen, die so hoch ist, wie das ganze Fenster. Innerhalb dieser Box möchte ich einen Footer der ganz am Ende des Fensters steht.

Vielleicht hilft euch das jetzt ;-)

Liebe Grüße
Thomas

[Detlef G.]

Hallo Thomas

... Ich möchte eine Box mit Rahmen, die so hoch ist, wie das ganze Fenster. Innerhalb dieser Box möchte ich einen Footer der ganz am Ende des Fensters steht.

Also eine Box mit Rahmen, die mindestens so hoch wie das Browsrfenster ist,
und innerhalb dieser den Footer immer ganz unten.

Das ist dann schon komplizierter.
Weil sich ein angegebenes Maß immer auf den Inhalt bezieht und der Rahmen noch
dazu kommt, ergeben sich bei 100% Höhe dann 100% plus 2*Rahmenbreite.

Eine mögliche Lösung für dein Problem habe ich mal hochgeladen.

Auf Wiederlesen
Detlef