Резиновая высота сайта
 

Привет, форумчане!
Есть задачка сделать блок резиновым, в зависимости от высоты экрана.
Есть код, работает, но как то не плавно и не ровно.

$(window).on("load scroll resize",function(e){
if ($(window).height() <= '489'){
$('#blue').css({'min-height':'100px'});
}
else if ($(window).height() <= '609'){
$('#blue').css({'min-height':'235px'});
}
else if ($(window).height() <= '657'){
$('#blue').css({'min-height':'285px'});
}
else if ($(window).height() <= '689'){
$('#blue').css({'min-height':'315px'});
}
else if ($(window).height() <= '753'){
$('#blue').css({'min-height':'365px'});
}
else if ($(window).height() <= '789'){
$('#blue').css({'min-height':'415px'});
}
else if ($(window).height() <= '849'){
$('#blue').css({'min-height':'475px'});
}
else if ($(window).height() <= '877'){
$('#blue').css({'min-height':'490px'});
}
else if ($(window).height() <= '887'){
$('#blue').css({'min-height':'500px'});
}
else if ($(window).height() <= '913'){
$('#blue').css({'min-height':'530px'});
}
else if ($(window).height() <= '939'){
$('#blue').css({'min-height':'550px'});
}
else if ($(window).height() <= '969'){
$('#blue').css({'min-height':'570px'});
}
else if ($(window).height() <= '987'){
$('#blue').css({'min-height':'590px'});
}
else if ($(window).height() <= '1040'){
$('#blue').css({'min-height':'640px'});
}
else if ($(window).height() <= '1089'){
$('#blue').css({'min-height':'680px'});
}
})

Существуют ли какие нибудь другие варианты ?

yamashka,
Вариант:

$(window).on("load scroll resize",function(e){
   var a = ($(window).height() - 389;
   $('#blue').css({'min-height':a+'px'});
})

Dilettante_Pro,
Спасибо большое!
Только правильно вот так

$(window).on("load scroll resize",function(e){
   var a = $(window).height() - 389;
   $('#blue').css({'min-height':a+'px'});
})

Скобка лишняя во 2 строке

yamashka, используйте CSS-медия запросы и единицы измерения vh/vw:

vh = 1% высоты экрана
vw = 1% ширины экрана

#blue {
   min-height: 50vh;
}