How to stretch a div or section block to the height of one screen?

Question

css

I'm trying to make One Page template for joomla. I use Bootstrap 3.
I would like to make each block on the page the size of one screen, even if there is not enough content inside it. so that when you click on anchor links on the screen, the information is completely replaced with the desired one.
In code it looks like this:

<section id="slider">
     about
</section>
<section id="about">
     about
</section>
<section id="footer">
     about
</section>

An example here
I ask the help of those who know.

Answer 1

Use the new units vh
codepen.io/iiil/pen/qbLKw
Screen height is 100vh
Support caniuse.com/#feat=viewport-units
There are other ways, in particular using js.

Answer 2

Thank you, I've never seen this size before. And for mobile, this "feature" also works?