making div full height of screen with other divs after

Question

I'm working on a homepage with multiple sections.

<div id="section1">
    <!-- This needs to be the full height of the screen -->
</div>
<div id="section2">

</div>
<div id="section3">

</div>

I would like section1 to be the full height of the screen and then the user can scroll down to see section2 and section3 - can this be done with CSS alone or will I need JS to set this dynamically?

Answer 1

You can use viewport units

CSS

#section1{
    display: block;
    background: #000;
    width: 100vw;
    height: 100vh;
}

DEMO HERE

Answer 2

No need for JavaScript here. With with simple css you can do it easily:

#section1{
    width:100%;
    height:100%;
    display:block; // or inline-block - Optional
}

You may have to set the body & html tags height:100% too, but not always.

Answer 3

You can try like this-

    html, body{height: 100%;}
    #section1{background: red;min-height:100%;}

<div id="section1">
   s <!-- This needs to be the full height of the screen -->
</div>
<div id="section2">

</div>
<div id="section3">

</div>

Answer 4

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

From here