Ich habe momentan das Problem, dass mein Header 100% Höhe besitzen soll, d.h. der nächste Block (im Container, orangefarben) erst nach scrollen sichtbar werden soll. Mit header 100% funktioniert das leider nicht. Habt ihr nen Tipp für mich?
Es handelt sich um folgende Seite http://marco-kroener.de/kroener-neu
Gib mal auf alle Container vor dem header ebenfalls 100%;
Also
Code:html,
body,
wrapper {
height: 100%;
}
Oder mal
#header { 100vh };
Danke für den Tipp. Der gewünschte Effekt tritt so auf jeden Fall schonmal auf beim ersten Blick. Leider zerpflückt mir das aber den Rest der Seite.
Entweder so:
oder so:Code:/*
* Header immer oben:
*/
#header { position: absolute; height: 100%; }
/*
* Fixierter Header:
*/
#header { position: fixed; height: 100%; }
Allerdings ist der Browsersupport für Variante 2 nicht so gutCode:#header { height: 100vh; }
http://caniuse.com/#search=vh
Sauber, mit #header { height: 100vh; } klappt das. Vielen Dank euch!
Aber nicht vergessen das Viewport units wie vh noch nicht von allen Browsern supported werden!
Du solltest also wenn du das verwendest für andere Browser noch Alternativdarstellungen einrichten..
Deshalb würde ich dir empfehlen dich für Variante 1 zu entscheiden
danke Bastian F für den Hinweis, da hast du natürlich recht...
mit deinen beiden Alternativvorschlägen sieht es allerdings so wie aktuell aus
http://marco-kroener.de/kroener-neu
So ist das, was im Header zu sehen sein sollte, eben nicht mehr sichtbar, bis auf Logo+Navi (waren bisher auch absolute gesetzt).
Der Container rutsch so nach oben, soll aber erst durch Scrollen sichtbar sein.
Ich würde an deiner Stelle wahrscheinlich das Intro unter den header in einen relativ positionierten wrapper legen. Sodass im Header nur noch nav und logo sind.
Das Intro kannst du dann auf position: absolute; und height: 100%; setzen und darunter kommt dann dein Container.