HTML CSS jak dopasowac rozdzielczosc

Question

Dzień dobry,

Zwracam się do Was z prośba o pomoc, aczkolwiek mój problem polega na tym, iż nie mam pojecią jak mogę uzyskać efekt taki jak na zdjęciu. Moja strona ma działać na identycznym przykładzie jak zdjęcie poniżej, czyli pomarańczowe tło 1) ma wyświetlać gdy wejdziemy od razu na strone na całym ekranie, gdy skrolujemy w dół, ukazuje się tak jak by pod strona 2, wiecie o co chodzi. Problem w tym że nie mam pojecią jak mogę uzyskać efekt "całego tła, rozdzielczości".

 

Przypuszczając że scena 1 (pomarańczowe tło) to div#orange

jakie właściwości muszę wykorzystać żeby automatycznie html/css 

powiększył mi to automatycznie do rozdzielczości monitora? na siłe

mógłbym sam dojśc do tego wypisując width, height, ale uważam że

jest lepsze rozwiązanie tego problemu.

Answer 1

Witam. Szukaj one page css html templates

Comments

Cześć.

Nie bardzo rozumiem, pytam jak właśnie mogę uzyskać taki efekt.

---

No to właśnie Ci napisałem. Wejdź np. na stronę codepen.io wpisz one page i przejrzyj kody.

proszę

Answer 2

przy użyciu jquery np.
w = $(window).width();
h= $(window).height():

oraz
$("body").css({"min-width": w, "min-height": h})

+ w CSS
html, body {
min-width: 100%;
min-height: 100%;

Answer 3

Ja bym to tak zrobił: div 1:

.visuallyshow {
height=100vh; 
width=100vw;

}

2, 3 z klasą: 

.visuallyhidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

Przy scrolowanu w dół javascript z div 2 usuwa klasę .visuallyhidden i dodaje visuallyshow, 

z 1 dodaje klasę .visuallyhidden i usuwa visuallyshow, itp.

Dodałbym do tego jakieś fajne wejście.