How to make section cover the height of the screen

Code Help HTML/CSS/JS
1

I’d like to make a section appear to cover the height of the screen. When the screen is scrolled, the next sections will show below it.

1 Like
2

erm

<!DOCTYPE html>
<html>

<head>
  <style>
    #section1 {
      /* Viewport height unit */
      height: 100vh;
    }
  </style>
</head>

<body>
  <section id="section1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</body>

</html>
1 Like
3

What I mean is that the section appears to cover the whole screen when the website is loaded but is really just accessing the dimensions of the browser.

4

??? what

yeah…

it gets the viewport’s height…

1 Like
5

Untitled
Untitled1152×648 4.89 KB

I’d like my website to look something like this diagram

6

Yeah. that’ts what it wll lok like if you use the code I provided…

1 Like
7

Ah crap – I misunderstood for a second. Once I looked back at it I realized it was working. When I originally plugged it into my code, I guess replit was just being slow. Sorry about the confusion and thanks for the help!

8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.