jQuery: динамическое измерение HTML

Question

Я использую 1 элемент div, чтобы сделать .background для моего сайта. и это будет 100% высоты. Для этого я использую утилиту измерений jQuery.

<div class="background"></div>

с помощью этого скрипта, чтобы получить высоту

$('.background').css( 'height', $(window).height() );

но теперь я хочу, чтобы его высота была динамичной. если мы изменим размер браузера. высота .background будет соответствовать новому размеру браузера. Я понимаю, что это потребует некоторых event, так как изменение размера после первой визуализации страницы.

Подскажите, пожалуйста, как сделать это с помощью jQuery?

Answer 1

Использование .resize().

$(window).resize(function() {
  $('.background').css( 'height', $(window).height() );
});

Answer 2

Взгляните на http://api.jquery.com/resize/.

Вам нужно добавить тот же код выше к событию изменения размера окна.

Answer 3

Разве вы не должны использовать фиксированное позиционирование css? Это позволяет вам установить высоту, ширину и положение элемента относительно области просмотра (окно браузера).

Взгляните на http://www.w3schools.com/Css/pr_class_position.asp