раздел div 100% высота сайта одной страницы

Question

Мне было интересно, при создании веб-сайтов одной страницы первый раздел имеет высоту 100%, а остальные - разные.

Как сделать первый раздел 100% высоты окна просмотра и в то же время сделать его отзывчивым?

Answer 1

добавить: html,body{height: 100%;} к вашему CSS и DIV можно установить высоту 100% видового экрана.

Answer 2

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

E.g.

$(document).ready(function() { 
    $('#top-content').height($(window).height()); 
}); 

Вы также можете прослушивать события изменения размера браузера, чтобы изменить размер при изменении.

function resizeTopContent(){ 
    $('#top-content').height($(window).height()) 
} 

$(document).ready(function() { 
    resizeTopContent(); 
}); 

$(window).resize(function() { 
    resizeTopContent(); 
}); 

Answer 3

Почему вы не используете свойства CSS «Единицы просмотра».

<div id="fullSize">Body Content</div> 


#fullSize { 
    height: 100vh; 
    width: 100vw; 
} 

http://caniuse.com/#feat=viewport-units

Viewport блоки дают вам возможность масштабировать свой дизайн в зависимости от размера устройства. Лучше всего? Он будет адаптировать разрешение мгновенно при изменении размера экрана.

Значения должны быть указаны в процентах (от 1 до 100).

Вот единицы VP, которые вы можете использовать.

• ВХ: VP Высота
• оч.сл.: ширина VP
• Vmin: VP мин Высота
• Vmax: VP максимальная высота