I have a website composed of various blocks with different heights, all extending to full width. My goal is to make the first block the full height and width of the browser window, while keeping the other blocks at a set height as seen on this site:
After numerous attempts, I managed to make the first block div fullscreen but encountered an issue where the subsequent blocks stacked under the first one and were not visible. I aim for the first block to occupy the full screen's dimensions while allowing users to scroll through the rest of the blocks below.
Initially, I tried achieving this using pure CSS but became uncertain if it was feasible, so I am also considering JavaScript.
You can view my JSfiddle demonstrating the problem here: https://jsfiddle.net/kff1swjf/
Here is the HTML markup:
<div id="section1">Section 1</div><!--this one should open full height and width of the browser window-->
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
<div id="section4">Section 4</div>
<div id="section5">Section 5</div>
This is my CSS:
#section1 {
background: red;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
#section2 {
background: blue;
height: 150px;
}
#section3 {
background: yellow;
height: 300px;
}
#section4 {
background: green;
height: 200px;
}
#section5 {
background: purple;
height: 175px;
}