Полноэкранная вёрстка с высотой секций 100%?

Question

[NikSIk31]

использую https://github.com/kevinoes/page-slider-js , (типа аналог fullpage.js). Суть в том, что в макете у меня фиксированная высота блока, и отступы от верха я делаю в px, но как показала практика у некоторых может быть чуть больше (меньше) высота экрана (точнее я смотрел в дев тулз). Из-за этого контент может вообще теряться (нижние его части), а если экран больше, то уже не по макету смотрится
как такое верстать? есть ли аналогичные сайты с нормальной вёрсткой? - чтобы я мог посмотреть (fullpage заходил, но там ведь чисто центрирование заголовка и всё...) - может видео есть или другие материалы?

Comments

[Шохрух Шаймардонов]

Ну отступы в относительных единицах задавайте (rem, em, vh...). Еще есть %

[NikSIk31]

Шохрух Шаймардонов, фух, по-тихоньку верстал как мог, вот что получилось - jobs-tudent.fast-ref.ru , однако всё равно бяка - ибо я следовал макету, но макет не захотел мне поддастся

[Шохрух Шаймардонов]

NikSIk31, ну я бы не сказал, что все так плохо. Это я судя по юзабилити. Код не смотрел

Answer 1

[Иван Медведев]

Если я правильно понял, вы имелли ввиду, как выровнять контент в каждой section по центру относительно высоты и ширины разных экранов.

В стилях для section пропишите:

section {
  height: 100vh;                     // устанавливаем высоту блока на весь экран
  display: flex;                        // флекс
  align-items: center;             // выравниваем по центру относительно высоты (вертикальное выравнивание)
  justify-content: center;        // выравниваем по центру по горизонтали
}

Comments

[NikSIk31]

вот такое у меня получилось, однако я не уверен, что это из-за выравнивания по центру, ибо высота все-равно в пикселях. И теперь вылетает подержимое и плывёт при адаптиве...
jobs-tudent.fast-ref.ru