Header soll 100% Höhe haben, Container soll erst nach scrollen sichtbar werden

[jack_typewriter]

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

[Contao-Academy]

Gib mal auf alle Container vor dem header ebenfalls 100%;

Also

html,
body,
wrapper {
height: 100%;
}

[Franko]

Oder mal

#header { 100vh };

[jack_typewriter]

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.

[Bastian F.]

Entweder so:

/*
* Header immer oben:
*/
#header { position: absolute; height: 100%; }

/*
* Fixierter Header:
*/
#header { position: fixed; height: 100%;  }

oder so:

#header { height: 100vh; }

Allerdings ist der Browsersupport für Variante 2 nicht so gut
http://caniuse.com/#search=vh

[jack_typewriter]

Sauber, mit #header { height: 100vh; } klappt das. Vielen Dank euch!

[Bastian F.]

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

[jack_typewriter]

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.

[Bastian F.]

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.