Position relative und bottom 0px

[droom]

Hi folks,

ich habe gesucht aber keine Lösung für mein Problem gefunden.

Ich habe folgendes:
<div id="main">
<p id="footer">
Impressum
</p>
</div>

und der style:
#main {
background-color:white;
height:100%;
margin:0pt auto;
width:963px;
}

der footer soll nun als P oder DIV immer ganz unten stehen. Ich habe mit:
p#foot {
padding:0px;
margin:0px;
position:relative;
bottom:0px;
vertical-align:bottom;
width:963px;
}
aber der footer steht immer ganz oben. Hat jemand ne Idee, was ich da falsch machen? Ich möchte keine absolute Positionierung haben, weil Inhalte noch vor dem Footer ev kommen. Der Footer soll einfach immer unten mit margin-bottom:0px.

[suit]

Hat jemand ne Idee, was ich da falsch machen? Ich möchte keine absolute Positionierung haben, weil Inhalte noch vor dem Footer ev kommen.

Works as desigend.

Was spricht dagegen, position: absolute; zu verwenden - ich verstehe deine Begründung nicht.

[droom]

Mit position:absolute passiert es in kleineren Browser, dass der footer auf dem text ist, wenn ein scrollbalken da ist.Der footer positioniert sich tatsächlich bei bottom:0px vom browserfenster und scrollt mit nach unten. Der verhält sich wie position:fixed.

[suit]

Mit position:absolute passiert es in kleineren Browser, dass der footer auf dem text ist, wenn ein scrollbalken da ist.Der footer positioniert sich tatsächlich bei bottom:0px vom browserfenster und scrollt mit nach unten. Der verhält sich wie position:fixed.

Was spricht gegen einen entsprechenden Innenabstand des Umgebenden div-Elements in der Höhe des Footers?

[droom]

Wie meinst du das? Man muss berücksichtigen, dass der Main-DIV relativ lang werden kann.

[Gunnar Bittersmann]

@@suit:

nuqneH

Was spricht gegen einen entsprechenden Innenabstand des Umgebenden div-Elements in der Höhe des Footers?

Dass man die Höhe nicht kennt? Gut, mit JavaScript könnte man sie abfragen …

Qapla'

[suit]

Dass man die Höhe nicht kennt? Gut, mit JavaScript könnte man sie abfragen

Natürlich - aber wenn man pauschal 3 em veranschlagt und hofft, dass die Fusszeile nur eine Zeile (bei 1.5 em Zeilenhöhe) einnehmen wird, kommt das schon hin :)

[Gunnar Bittersmann]

@@suit:

nuqneH

und hofft, dass die Fusszeile nur eine Zeile (bei 1.5 em Zeilenhöhe) einnehmen wird

Bei breitem Viewport. Und wenn’s bei schmalem mmehrzeilig wird? Scrollbar im Footer?

Qapla'

[suit]

Bei breitem Viewport. Und wenn’s bei schmalem mmehrzeilig wird? Scrollbar im Footer?

Natürlich - aber was ist die alternative? Ein Sticky-Footer ist sowieso Käse - und durch eine einwandfreie Lösung wird ein technisch defekter Ansatz auch nicht besser.

[droom]

Habe trotzdem nicht verstanden, was das in meinem fall heisst.
Der css ist doch recht simpel und meine Frage auch.
Wie positioniere ich unten einen P bzw. einen DIV in einem DIV mit einer höhe von 100%?

[suit]

Habe trotzdem nicht verstanden, was das in meinem fall heisst.
Der css ist doch recht simpel und meine Frage auch.
Wie positioniere ich unten einen P bzw. einen DIV in einem DIV mit einer höhe von 100%?

Mit position: absolute und den genannten Vorschlägen (unter akzeptanz der daraus entstehenden Probleme).

[droom]

habe es irgendwie nicht verstanden, was du mit dem 3em meinst :(

[suit]

habe es irgendwie nicht verstanden, was du mit dem 3em meinst :(

em

[ChrisB]

Hi,

Mit position:absolute passiert es in kleineren Browser, dass der footer auf dem text ist, wenn ein scrollbalken da ist.Der footer positioniert sich tatsächlich bei bottom:0px vom browserfenster

Nur, wenn du nicht dafür sorgst, dass seine Positionierung sich auf etwas anderes bezieht, als den Viewport.

und scrollt mit nach unten. Der verhält sich wie position:fixed.

Fixed positionierte Elemente scrollen nicht mit, sondern bleiben stehen.

MfG ChrisB

[MudGuard]

Hi,

<p id="footer">

p#foot {

paßt irgendwie nicht ganz zusammen ...

cu,
Andreas