nicht angemeldet
Hallo,
ich möchte/muss einen Div-Container über der Statusbar des Browsers positionieren, also ganz unten im Bild.
Dies habe ich so gelöst:
<div style="border: 1px solid; width: 680px; height: 400px;">Text</div>
<div style="width:100%; position:absolute; bottom:0px;">Leiste unten</div>
Dies funktioniert soweit gut, ich habe aber ein Problem, wenn das Browserfenster relativ klein ist.
Also hier mal der Aufbau der Seite
-----------------------
Logo
-----------------------
______________
/ \
| |
| Text |
| |
\______________/
----------------------
Leiste unten
----------------------
Also so soll die Seite aussehen, wobei die 'Leiste unten' an die Statusbar des Browsers andockt.
Das Problem ist jetzt, wenn das Browserfenster zu klein ist, also nicht alles auf 1 Bild passt, dann überlappen sich 'Leiste unten' und der Text-Container, also die Leiste liegt vor dem Text-Container.
Ich möchte aber, dass die 'Leiste unten' immer unterhalb des Text-Containers ist.
Wenn das Fenster zu klein ist, soll die Leiste einfach unten an den Text-Container andocken, hat man aber ein ganz großes Fenster, soll die Leiste an die Statusbar andocken.
Alternativ könnte die Leiste bei einem zu kleinem Fenster auch mit runterscrollen, also ein ähnlichen Effekt als wenn man die Leiste und den Text in verschiedenen Frames hätte.
Aufgrund der Suchmaschinenfreundlichkeit möchte ich aber gerne auf Frames und JS verzichten.
Kennt jmd. eine Lösung dafür? Dass die Leiste ganz untem im Fenster positioniert ist, aber den Text-Container nicht überlagert?
PS: z-index geht auch nicht, da die Leiste wichtige Infos enthält.
Über Lösungen wäre ich dankbar.
MFG