jQuery - 给定一个 div，将 div 的高度延伸到底部答案

【问题标题】：jQuery -given a div, extend the div's height to reach the bottomjQuery - 给定一个 div，将 div 的高度延伸到底部
【发布时间】：2011-06-17 01:37:37
【问题描述】：

给定页面上的一个 div，例如 <div id="rightRail>xxx</div>

是否有可能在浏览器加载/调整大小时神奇地使该 div 的高度调整大小以使高度达到窗口的底部？如果 div 位于页面顶部会更容易，但事实并非如此。谢谢

【问题讨论】：

stackoverflow.com/questions/1443465/jquery-dynamic-div-height 可能有帮助

标签： jquery

【解决方案1】：

您需要.offset()^help 顶部值和当前窗口中的innerHeight 来设置其.height()^help。这看起来像：

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

演示：http://jsfiddle.net/d3ays/

【讨论】：

如果页面比浏览器窗口高，这将最终将页脚高度设置为 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; });

【解决方案2】：

如果页面比浏览器窗口高，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;
});

【讨论】：

【解决方案3】：

你可以试试下面这个函数用来获取窗口高度的代码：

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。

也许这对你有用。

【讨论】：