Clanintern Clanintern Clanintern

Forum

Öffentliche Foren
FORUM: Spiele & Computer THEMA: [CSS] Div auf 100% Höhe
AUTOR BEITRAG
Morph

RANG Nach-3-Bier-Kotzer

#1 - 04.01 14:19

Hallo Leute,

ich möchte ein Div komplett bis nach unten gehen lassen.

frag-it.de/test/index.jpg
frag-it.de/test/

Wie man auf dem oberen Screen erkennen kann, geht der rechte Rahmen der Navigationsleiste komplett bis zum Footer Rahmen.

Aber praktisch bekomme ich das nicht hin. Die Navigationsleiste will einfach nicht die Höhe von 100% annehmen. Habe schon in diversen Foren gestöbert aber bis auf Tables keine vernünftige Antwort gefunden.
Für ein bissel Hilfe wäre ich sehr dankbar.
klaustopher *der ernst des lebens*

RANG Skill Apprentice

#2 - 04.01 15:39

hmmm ...

code:
#mydiv { position: absolute; top: 0px; bottom: 0px; }

?
*al!ve* - will code for food

RANG Master of Clanintern

#3 - 04.01 15:43

Ich bin schon dadurch überfordert, dass dein Design fünf mal so groß ist wie mein Bildschirm.

Du wirst grundsätzlich absolut daran scheitern, dass ein height:100% (und das ist das einzige was du in dem Fall brauchen kannst) 100% desjenigen Elements bedeutet, das begrenzend drum herum liegt. Body auf 100%, html auf 100%, div drum herum auf 100%.
So weit noch kein Problem, aber wenn oben zwei Divs mit zusammen 200px liegen (sidebar und header) erzeugt dein height:100% der Navis, dass das Navi 100% Bildschirmhöhe hat, aber leider nicht an er Bildschirm-Oberkannte anfängt -- und deshalb muss deine Seite scrollen, eben um die 200px die das 100% Navi-Div von oben versetzt anfängt.
Lösung: Mach erst ein zweispaltiges Layout (div drum rum 100% height margin auto width fest wie gewünscht, dann div float left height 100% width 100px für s navi und ein weiteres div margin-left 100px für den Content), teil deinen Header und dein "sidebar" jeweils in eben diese zwei Spalten ein (zerlege also beides in je zwei einzelne Divs) und platziere die in den beiden Spalten.

Du solltest btw nicht mit so viel unterschiedlichem Content arbeiten wenn du grade noch layoutest. Dadurch wird die ganze Sache sehr sehr umständlich