JQuery -given в DIV, расширить высоту DIV, чтобы достичь нижней

Question

дана DIV на странице, как <div id="rightRail>xxx</div>

Можно ли как некоторые магически сделать высоту, DIV в размере на Broswer загрузке/размере так, чтобы высота достигает нижней части окна? Было бы проще, если бы div находился в верхней части страницы, но это не так. спасибо

Answer 1

Вам нужно верхнее значение .offset()^help и innerHeight из текущего окна, чтобы установить его .height()^help. Это будет выглядеть так:

$('#div').height(function(index, height) { 
    return window.innerHeight - $(this).offset().top; 
}); 

Demo: http://jsfiddle.net/d3ays/

Answer 2

Вы можете попробовать следующий код, в котором эта функция используется для получения высоты окна:

function GetHeight() 
{ 
    var y = 0; 
    if (self.innerHeight) 
    { 
      y = self.innerHeight; 
    } 
    else if (document.documentElement && document.documentElement.clientHeight) 
    { 
      y = document.documentElement.clientHeight; 
    } 
    else if (document.body) 
    { 
      y = document.body.clientHeight; 
    } 
    return y; 
} 

И затем использовать JQuery, чтобы дать height вашему DIV динамически, как это:

document.ready(function(){ 
    var heightOfDiv = GetHeight(); 
    jQuery('#rightRail').css("top",heightOfDiv +"px"); 
}); 

После того, как вы можете манипулировать переменной heightOfDiv путем добавления или вычитания пикселей в соответствии с вашими потребностями.

Возможно, это сработает для вас.

Answer 3

Если страница находится выше, чем в окне браузера решение JANDY будет в конечном итоге установки высоты Div в 0. Он также не принимает во внимание любое дополнение, которое может быть применено к div. Вот код, который сравнивает высоты, а также настраивает для заполнения.

$('#div').height(function(index, height) { 
    var current_height = $(this).height(); 
    var new_height = window.innerHeight - $(this).offset().top - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom')); 
    if (new_height > current_height) return new_height; 
});