Как растягивать div по всей высоте окна браузера

Главная > HTML CSS JS > Как растягивать div по всей высоте окна браузера

24 января 2012 zabey Написать комментарий К комментариям

С помощью css растянуть слой у меня не получилось. На помощь пришел javascript и JQuery. при изменении размеров будем менять размер слоя принудительно:

$(document).ready(function($){ //запускаем, когда документ загрузится
$(window).resize(function(){ //Вешаем на событие ресайза у окна функцию
$("#div_id").height($(window).height()); //меняем высоту дива на высоту окна
});
$("#div_id").height($(window).height()); //меняем высоту дива на высоту окна в первый раз, т.к. событие просто при открытии не вызывается
});

$(document).ready(function($){ //запускаем, когда документ загрузится

$(window).resize(function(){ //Вешаем на событие ресайза у окна функцию

$("#div_id").height($(window).height()); //меняем высоту дива на высоту окна

});

$("#div_id").height($(window).height()); //меняем высоту дива на высоту окна в первый раз, т.к. событие просто при открытии не вызывается

});

Вот так все просто. Вообще для window и document доступна только эта функция. Зато для остальных элементов есть еще несколько: подробнее здесь.

Categories: HTML CSS JS Tags: div, height, JQuery, resize

(1 votes, average: 5,00 out of 5)

Загрузка...

Комментарии (4) Уведомления (0) Написать комментарий Уведомление

eneloshkin

7 августа 2012 в 20:17 | #1

Ответить | Цитата

Я не очень понял, что именно делает этот скрипт, но если нужно растянуть слой на всю высоту то достаточно написать 100%, не забыв указать так же 100% для всех потомков.
Pershin

28 сентября 2012 в 19:16 | #2

Ответить | Цитата

Спасибо большое! Очень очень помогло … долго я это искал… а то пишут всякую .. непонятку… Спасибо еще раз)))
Silver Ghost

25 марта 2013 в 06:58 | #3

Ответить | Цитата

Реально помогло. Необходимо было менять высоту изображения, относительно высоты окна браузера.
banderlog

19 ноября 2013 в 06:34 | #4

Ответить | Цитата

Все просто и понятно. Спасибо, работает.