1

如果忽略应用于它的“高度”css 属性，我该如何获取页面上元素的高度？

我正在处理的网站是http://www.wncba.co.uk/results，到目前为止我得到的实际脚本是：

jQuery(document).ready(function($) {

    document.origContentHeight = $("#auto-resize").outerHeight(true);
    refreshContentSize(); //run initially
    $(window).resize(function() { //run whenever window size changes
        refreshContentSize();
    });
});

function refreshContentSize()
{       
    var startPos = $("#auto-resize").position();
    var topHeight = startPos.top;
    var footerHeight = $("#footer").outerHeight(true);
    var viewportHeight = $(window).height();    
    var spaceForContent = viewportHeight - footerHeight - topHeight;

    if (spaceForContent <= document.origContentHeight)
    {
        var newHeight = document.origContentHeight;
    }
    else
    {
        var newHeight = spaceForContent;
    }
    $("#auto-resize").css('height', newHeight);
    return; 
}

[ http://www.wncba.co.uk/results/javascript/fill-page.js ]

我要做的是让主页内容拉伸以填充窗口，以便绿线始终沿着页面向下流动，并且“有效 HTML5”和“设计者”消息永远不会高于底部窗户。我不希望页脚粘在底部。如果没有足够的内容来填充它，我只是希望它留在那里而不是向上移动页面。如果浏览器窗口大小发生变化，它也必须相应地进行自我调整。

到目前为止我得到的脚本有效，但有一个小问题我想用它来解决。目前，如果页面上的内容动态变化（导致页面变长或变短），脚本将不会检测到这一点。该变量document.origContentHeight将保持设置为旧高度。

有没有一种方法可以检测元素的高度（例如示例中的#auto-resize）以及它是否已经改变而忽略了在css中为其设置的高度？然后我将使用它来更新变量document.origContentHeight并重新运行脚本。

谢谢。

4

2 回答 2

0

我认为除了使用插件之外，没有办法检测元素大小何时发生变化，

$(element).resize(function() //only works when element = window

但是为什么不refreshContentSize动态调用页面更改上的函数呢？

看看这个jsFiddle DEMO，你就会明白我的意思了。

或者您可以使用Jquery-resize-plugin。

于 2012-05-11T15:40:29.497 回答
0

我已经让它工作了。我不得不重新考虑一下。解决方案在现场。

如果可能的话，我认为我想改变的是

setInterval('refreshContentSize()', 500); // in case content size changes

有没有一种方法可以检测表行的大小已经改变，而不需要每 500 毫秒进行一次检查。我试过(#content).resize(function()但无法让它工作。

于 2012-05-12T15:04:04.823 回答