Современные браузеры позволяют посредством CSS3 растянуть блок по всей высоте видимой области. Однако с браузерами предшественниками, не поддерживающие стандарт CSS3 всё гораздо иначе. Есть случаи, при которых можно обойтись без CSS3 в старых браузерах и растянуть блок по высоте, не прибегая к JavaScript. Если блок расположен непосредственно после тега body, то достаточно задать высоту для тега html, body, а так же самого div, величиной 100%.
В современных браузерах есть поддержка CSS3, а это значит, что есть возможность использования обозначения единицы измерения vh, которая укажет браузеру, что нужно задать значение в процентах от размера самого окна браузера. И в этом случае следующая запись могла вполне может быть уместной для того чтобы растянуть блок div по высоте:
div { height: 100vh; /* 100% от высоты размера окна браузера */ }
Второй вариант более практичный, так как поддерживается большинством браузеров, вне зависимости от того есть ли у браузера поддержка CSS3 или нет. Здесь будет задействован javascript наряду с jquery. Используя $(window).height мы можем получить высоту окна браузера, после чего нам достаточно задать эту высоту для блока, чтобы растянуть div по высоте окна браузера.
// функция узнает размер окна браузера, и задает её для блока div
function fullHeight(){
$('.myDiv').css({
height: $(window).height() + 'px'
});
}
// задаем высоту при первичной загрузке
fullHeight();
// высота при изменении размера окна браузера
$(window).resize( fullHeight );
Второй способ позволяет растянуть блок div по высоте практически во всех браузерах, где есть поддержка JavaScript. CSS3 в скором времени будет использоваться повсеместно. Однако есть процент пользователей, использующих браузеры без поддержки этого стандарта. Использовать какой либо из примеров или нет — решение за вами, на этом пока всё, спасибо за внимание.
