Question

在<div id="rightRail>xxx</div>

这样的网页上给出div

是否有可能神奇地使div的高度调整到加重/调整大小以使高度达到窗口的底部？如果div位于页面顶部会更容易，但它不是。感谢

Answer 1

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

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

演示：help

Answer 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;
});

Answer 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。

也许这适合你。

jQuery -given一个div，扩展div的高度到达底部

3 个答案: