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?