Секции на всю ширину и высоту экрана в Landing Page?

Question

[Максим]

Всем доброго времени суток. Поискал свой вопрос на тостере, увы не нашел.
Интересует следующий вопрос. При создании Landing page, реализуется структура сайта в виде section:

<section>
      <div class="wrap">
        <div class="container">
          <div class="row">
            <col-md-12>
              ...
            </col-md-12>
          </div>
        </div>
      </div>
</section>

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

1 вариант для:

html, body {
height:  100%;
}
.wrap {
height:  100%;
}

2 вариант для :

.wrap  {
height: 100vh;
}

Вообщем задача, отображение каждой секции на всю ширину и высоту экрана.
Вообщем, классика - LP.

Интересует опыт и методы людей, которые они применяют для реализации данных задач под LP.
В целом, как правильно реализовывать данный аспект? Я имею ввиду "экраны". В том числе и с точки зрения адаптивности.

Спасибо. Буду рад каждому комментарию.

Answer 1

[Алексей]

На чистом CSS не пробовал. Обычно для этой цели использую Fullpage

Только ограничиваю адаптивность для малых экранов. Там делаю обычные по высоте секции.

Comments

[Максим]

Спасибо за комментарий! Думал сейчас в меня камни полетят, на счет того, что вопрос избитый..

[Алексей]

Aspirin77: Пожалуйста)
Сам в свое время искал что в этих целях использовать. Этот наиболее корректно отрабатывал, то что мне надо было. Да и с настройкой особых проблем нету.

[Lvan226]

Алексей, Прошло дофига времени, но спасибо, а то при 100vh куча траблов

Answer 2

[Pavel Borodin]

Если я правильно понял вопрос, то:

section{
height: 100vh;
width: 100vw;
}

Comments

[Pavel Borodin]

Посмотрел на решение, предложенное выше, - правильно понял)

[Максим]

Павел Бородин: это по сути, вариант 2, из написанного выше мною. Работает неплохо, да и в целом я не зациклен на поддержку каких-то там древних браузеров. Вы сами пользуйтесь такой схемой при создании? С какими-то проблемами можно столкнуться?

[Pavel Borodin]

Да, согласен, это второй вариант, просто привязка к секциям идет, а не к внутренним блоку (.wrap). Работает отлично. В подобных задачах пользуюсь этим методом. Проблем не было. Можно легко допилить js, css анимации и получить красивости как в плагине, который Вам предложили выше.

[Максим]

Павел Бородин: согласен, но необходимо ли это?) когда уже есть готовый вариант. Как по мне, когда как )
В любом случае, спасибо за комментарии.

[Pavel Borodin]

Согласен, - хорошо, когда уже есть готовый велосипед и нет необходимости изобретать колеса. Но иногда требуется следить за нагрузкой, а использование готовых плагинов, порой, негативно на это влияют. А оптимизация готовых решений, как таковых - гемор еще тот, поэтому иногда легче потратить 30 минут времени, но сделать подобное непосредственно под свой проект, своими руками.
А за комментарий - не за что)