Отправка сообщения






Добро пожаловать!

Как растянуть блок div по высоте окна браузера?

Современные браузеры позволяют посредством 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 в скором времени будет использоваться повсеместно. Однако есть процент пользователей, использующих браузеры без поддержки этого стандарта. Использовать какой либо из примеров или нет — решение за вами, на этом пока всё, спасибо за внимание.

Добавил: htmaker, 23.07.2016 г.
 
плохослабосойдетхорошоотлично (1 голосов, средний: 3,00 из 5)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Комментарии

  • Загрузка...
Форум digital-planet.info

Наверх