Letzter Versuch,
kopf mit 20% Höhe.
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.
Mache ich es mit absolutem div
#haupt {
position: absolute;
width:100%;
height:100%;
background-color: blue;
}
klappt es, das der Kopf 20% Höhe bekommt und ich body noch eigenständig formatieren kann. Dann kommt aber der Einwand :
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; ).
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?
kopf mit 20% Höhe.
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.
Mache ich es mit absolutem div
#haupt {
position: absolute;
width:100%;
height:100%;
background-color: blue;
}
klappt es, das der Kopf 20% Höhe bekommt und ich body noch eigenständig formatieren kann. Dann kommt aber der Einwand :
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; ).
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?