Mache ich es ohne absolutes div.
html {height: 100%; width: 100%;}
kommt der vollkommen berechtigte Einwand: Allerdings halte ich es nicht für besonders sinnvoll, die Höhe auf 100% zu begrenzen. Denn je nach viewport wird der Platz für den Inhalt ausreichen oder eben auch nicht.
klappt es, das der Kopf 20% Höhe bekommt und ich body noch eigenständig formatieren kann. Dann kommt aber der Einwand :
[I]warum wird #haupt per position:absolute in den Viewport genagelt??
Die Höhenangabe von 100% dafür ist wirkungslos, weil 100% von was?
Da die Vorfahren (body, html) keine Höhenangabe haben, kann 100% für #haupt nicht errechnet werden und fällt auf den default-Wert zurück (height:auto; ).[/I]
[SIZE=4]Wie bekommt man es nun richtig hin? Das ein Header auf einer Seite erscheint, der 20% Höhe der Seite einnimmt aber min. 120px hoch ist?[/SIZE]
somit gibst du dem #haupt an dass er 20% hoch sein soll aber mindestens 120px hoch ist, ich habe ihm noch eine hintergrundfarbe und ein align gegeben welches du dann halt wieder entfernen musst oder ändern.
Textfarbe kann mit color noch angegeben werden.
hoffe konnte helfen.
Vielen dank für deine schnelle Antwort.
Es klappt so keine Frage, es ist eine Lösung allerdings habe ich dann html wieder auf 100% height, und dann greift doch wieder der Einwand
Allerdings halte ich es nicht für besonders sinnvoll, die Höhe auf 100% zu begrenzen. Denn je nach viewport wird der Platz für den Inhalt ausreichen oder eben auch nicht.
kann ich den auch nehmen, will dann noch ein Inhaltsfenster von 75% height haben? Hierrauf kam dann der Einwand mit dem absolut genagelten Haupt, was ist denn eigentlich daran so falsch?
Ein Element mit position: absolute; wird vollständig aus dem Normal Flow herausgenommen. Alle anderen Elemente ignorieren die absolut poitionierte Box völlig und machen auch kein Platz dafür.
Quelle: Einstieg in CSS von Elisabeth Wetsch
Das bedeutet dass das absolute Element die anderen überdeckt und nicht gefloatet werden kann.
was ich daran nicht verstehe, wenn die anderen es ignorieren, kopf also nicht innerhalb von haupt ist warum kriegt kopf dann 20% höhe wenn ich haupt absolut positioniere und wenn ich haupt weglasse eben nur die höhe seines Inhaltes.
Irgendwie muß haupt doch kopf beeinflussen.
Da liegt irgendwie mein knick im Schlauch.
Irgendwie versteh ich das so, daß kopf 20% von Haupt bekommt, wenn haupt absolut positioniert ist.
das ist aber wohl falsch. Nur wovon bekommt kopf denn dann die 20% indem Fall indem es klappt???
ich denke das Problem liegt darin das du mit h1 eine überschrift mit einer vorbestimmten höhe hast womit du die 20% vom .kopf wieder relativierst, weil h1 ja nicht über den rand von .kopf kommen kann. eine class würde ich auch nicht mit mit height und width angeben wenn du sie dazu brauchst texte mit einem hintergrund zu versehen da, gerade bei überschriften, die höhe bereits gegeben ist.