Как растянуть блок div или section на высоту одного экрана?

Question

[Dmytro Sytnik]

Пытаюсь сделать One Page шаблон для joomla. Использую Bootstrap 3.

Хочется что бы получилось сделать каждый блок на странице в размер одного экрана даже если не хватает внутри него контента. что бы при переходе по якорным ссылкам на экране заменялась полностью информация на нужную.
В коде выглядит примерно так:

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

Пример тут
Прошу помощи знающих.

Answer 1

[Юрий Лобанов]

Используйте новые единицы измерения vh
codepen.io/iiil/pen/qbLKw
Высота экрана равна 100vh
Поддержка caniuse.com/#feat=viewport-units
Есть и другие способы, в частности применение js.

Answer 2

[Dmytro Sytnik]

Спасибо, до этого никогда не сталкивался с такой размерностью. А для мобильного данная "фича" тоже работает?

Comments

[Юрий Лобанов]

Дополнил ответ поддержкой. Посмотрите по ссылке, да, работает.

[Dmytro Sytnik]

@DonSinDRom спасибо, теперь буду знать.