Making each section get the perfect height of the viewport

Asked Oct 20 '15 at 18:20

Active Oct 20 '15 at 18:34

Viewed 43 times

Often I visit websites where the background-image fits perfectly into my viewport size. When you scroll.. the next section fits perfectly into the viewport too

As a reference use this url

It does not matter whether I am using a 18' monitor or a 21' inch

Checking the source code I found this:

<section class="slide" style="height: 939px;"> .... </section>
<section class="slide" style="height: 939px;"> .... </section>
<section class="slide" style="height: 939px;"> .... </section>

Somehow they managed to capture my viewport height and adjust each section dynamically.

Is it right to assume that upon page load they perform some window.height and then dynamically set height of each section to that value or is there some utility that does this automatically ?

edited Oct 20 '15 at 18:34

Michael Benjamin

346,931
104
581
701

asked Oct 20 '15 at 18:20

runtimeZero

26,466
27
73
126

2

Not an answer, but that can be done with `100vh` easily. – Stickers Oct 20 '15 at 18:23
You are correct in your assumption. The height of the sections are mostly set using javascript. – Brian Glaz Oct 20 '15 at 18:23
1

See this http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript – hampusohlsson Oct 20 '15 at 20:55

Making each section get the perfect height of the viewport

0 Answers0