Как верстать и программировать полноэкранные страницы?

Question

[Umid]

Моё почтение.
Уже не первый раз думаю о том, что бы сделать такой сайт, который состоял из секций, на всю ширину и высоту монитора, проблема в том, что бы адаптировать контент.

Так же данная страница будет состоять из так называемых модулей(секций). Каждая секция равна ширине и высоте монитора.
Предполагается, что скролла не будет. Будет своеобразная навигация по странице.

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

Со скриптом всё ясно. Но с вёрсткой не пойму, как адаптировать таким образом, что бы не было нужды в скроллах.
Ссылки на Книги, статьи; своё мнение - буду благодарен, если поделитесь.

Comments

[sergey]

только делал подобный сайт, правда условие было что секции на всю ширину экрана только на больших экранах от 1920 до 1024px (без планшетов и смартфонов)

Answer 1

[xmoonlight]

для всей страницы: overflow:hidden
для блока:

width: 100vw;
height:100vh;
position:absolute;
top:0px;
left:0px;

дальше, visibility переключаем у блоков через смену класса и всё.

Comments

[Umid]

vh и vw боюсь использовать.

[Umid]

Интересовало совсем другое. Но эврика уже пришла. Спасибо за ответ.

[Иван]

Umid: есть менее "феншуйный" способ - высчитывать размеры и задавать их JS'ом.

Answer 2

[iBird Rose]

alvarotrigo.com/fullPage

Answer 3

[Иван]

проблема в том, что бы адаптировать контент.

поверьте, не у вас одного

Так же данная страница будет состоять из так называемых модулей(секций). Каждая секция равна ширине и высоте монитора.

• содержимое хранится в JS и подменяется при кликах / событиях шаблнизатором
  
• пользуются специальные плагины, например как написал iBird Rose alvarotrigo.com/fullPage
  
• содержимое хранится в скрытых дивах, управляется собственно видимостью нужного блока
  

Но с вёрсткой не пойму, как адаптировать таким образом, что бы не было нужды в скроллах.

Ну на самом деле вариантов вагон. По факту вам нужна "резиновая верстка", но строгой реализации нет - все зависит от контента.

PS
Думаю для такого приложения неплохо зайдет React.

Comments

[Umid]

Как раз в скором времени надумывал изучить React.