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]

我要做的是将主页面内容拉伸以填充窗口，以便绿线始终一直向下流动，并且'Valid HTML5'和'Designed By'消息永远不会超过窗户的底部。我不希望页脚粘到底部。我只是希望它留在那里而不是向上移动页面如果没有足够的内容填充上面填充它。如果浏览器窗口大小发生变化，它也必须相应地进行自我调整。

我到目前为止所使用的脚本有效，但是我想用它解决一个小问题。目前，如果页面上的内容动态变化（导致页面变长或变短），脚本将无法检测到此情况。变量document.origContentHeight将保持设置为旧高度。

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

感谢。

Answer 1

我认为除了使用插件之外，还有一种方法可以检测元素大小的变化，

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

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

看看这个jsFiddle DEMO，你会理解我的意思。

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

Answer 2

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

如果可能的话，我想改变

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

有没有办法检测表行是否已经改变了大小而没有每隔500毫秒进行一次查询。我试过(#content).resize(function()，但无法让它发挥作用。

在应用css高度后获取网页上元素的默认高度）

2 个答案: