Как сделать адаптивные блоки занимающие 100% vp?

Question

[Daniel Skripnik]

Добрый вечер, коллеги.
Помогите пожалуйста понять концепцию и подобрать правильный подход.

Дано: Одна страница состоящая из двух визуальных блоков - главной картинки и контента.

Нужно: создать страницу, что бы на любом девайсе было отображение четко во весь экран (при загрузке) сперва главной картинки, и при полной прокрутке вниз во весь экран отображалась секция контента.

Вопрос: Как это реализовать в бутстрапе? Хорошо ли для секций row задавать высоту 100%, а для body/container 200%? Есть ли какие-то альтернатвы такому подходу? И какая вообще хорошая практика в создании одностраничных сайтов - простыней, в которых секции не раздуты контентом, а их просто нужно вручную растягивать?

Спасибо!

Answer 1

[Сёмка Гавриленко]

Я реализовывал это следующим образом:
на страницу ставим 2 блока

<div class="container-fluid">
</div>
<div class="container-fluid">
</div>

Каждому container-fluid присваиваем стиль height:100%
Пример реализации zapraudu.info/referendum

Comments

[Daniel Skripnik]

Действительно, спасибо.
Очевидное перед носом :)

Answer 2

[Sanan Yuzb]

В бутстрапе создаете блок с классом container-fluidвнутри него блок с классом row и внутри него блок с классом col-xs-12
и последний блок будет на весь экран, при любых размерах

Comments

[Daniel Skripnik]

Последний блок будет в ширину экрана и в высоту своего контента, а если контента не достаточно для полной высоты экрана?