Reputation:
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
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