user1322720
user1322720

Reputation:

Fit part of a webpage into the viewport

I have a webpage with two divs:

+----------------+
|                |
+----------------+
|                |
+----------------+

When the user visits that page, I want the top div scaled to the width and height of the viewport, filling the browser window completely. In other words: the user should see all of the top div and nothing but the top div. The user should then be able to scroll down to the second div. The second div is of varying height.

How can I accomplish this?

I would prefer a solution without JavaScript.

Upvotes: 0

Views: 96

Answers (1)

user254153
user254153

Reputation: 1883

Use CSS:

 <div id="welcome">
 your content on screen 1
 </div>

<div id="projects">
 your content on screen 2
</div> 

 div#welcome {
height: 100vh;
background: black;
 }

div#projects {
height: 100vh;
background: yellow;
}

FOr more refer to this: here

Upvotes: 1

Related Questions