获取css高度应用后网页元素的默认高度)

Question

如果一个元素忽略了应用于它的' height‘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并重新运行脚本。

谢谢。

Answer 1

我已经把它弄好了。我不得不重新考虑一下。解决方案就在实时站点上。

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

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

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

Answer 2

我认为除了使用插件之外，没有其他方法可以检测元素大小的变化。

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

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

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

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