Высота динамической секции на основе видового окна

Question

Я разработал вертикальную тему с полноэкранным фоном с якорной плавной навигацией. Я пытаюсь адаптировать раздел фона на высоте окна просмотра, потому что на высоком разрешении некоторые пользователи могут видеть следующий и предыдущий раздел, даже если они перемещаются по определенному якорю.

Например: пользователь перемещается по адресу www.mysite.com/#aboutus, но с высоким разрешением вы можете видеть предыдущее (#home) и следующее (#portfolio) содержание и фон раздела.

Так что у меня есть три проблемы:

1. Все фоны должны адаптировать окно просмотра, учитывая, что есть один заголовок и нижний колонтитул в фиксированном положении и высоту
2. Секция должна адаптироваться к высоте видового экрана на изменение размера и нагрузки
3. тело должно scrollTo конкретного якорь адаптации к исходному размеру окна просмотра или изменения размера

для первой задачи я использую этот скрипт для s и высота динамически

$(function(){ 
    $(window).load(function(){ // On load 
     $(window).load(function(){ // On load 
      $('#section_name').css({'height':(($(window).height()))+'px'}); 
      $('#section_name').css({'margin-bottom':'200px'}); 


     }); 

Я попытался динамически добавить нижний край, чтобы надавить на содержимое следующего раздела. Цель состоит в том, чтобы адаптировать фон и содержимое раздела к высоте видового экрана, чтобы избежать просмотра предыдущего и следующего разделов с высоким разрешением.

Кто-нибудь может мне помочь?

Answer 1

Это может быть достигнуто с помощью медиа-запроса в css. Вы можете написать отдельный css для каждого устройства. Например: -

@media screen and (max-height: 600px){ 
    body { 
      height:600px; 
    } 
}