Как установить высоту сечения в соответствии с экраном?

Question

Пожалуйста, посмотрите на это website, я использую section для каждой страницы, как вы можете видеть, перейдя ко второй странице, есть дополнительное пространство, которое принадлежит первой странице (следующее изображение).

Есть четыре раздела и каждая высота секции устанавливается 100%. то почему там есть дополнительное пространство?

Answer 1

Минимальная высота для тела установлена ​​на 1000 пикселей, чтобы гарантировать, что для каждого блока, который вы можете прокручивать на сайте, достаточно места для покрытия области просмотра. Итак, если ваш рост на 100% для одного раздела меньше минимального 1000px, тогда вы получите огромное пространство, потому что минимум больше, чем вам действительно нужно.

Вы можете при необходимости установить высоту в абсолютное значение (x px, где x < 1000), пока пространство не исчезнет. Что-то вроде #s1 { height: 700px; } будет работать, где # s1 - это раздел, на который вы указали в своем вопросе, а 700px - пример высоты, которая в основном удалит это пространство, но оставит достаточно между разделами 1 и 2. Не стесняйтесь изменять это значение пока вы не удовлетворитесь взглядом.

Answer 2

Что вам нужно, это javascript. Это у верхней части моей головы, и вообще, но попробовать что-то вроде этого:

jQuery(function($){ 
$(window).bind("load, resize", function() { 
    var sections = $("section"); 
    var height = $(window).height(); 

    height = $(window).height(); 
    $(sections).height(height); 
}); 

});