CSSの高さが適用された後で、Webページの要素のデフォルトの高さを取得する）

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は古い高さとして設定されたままです。

要素の高さを検出する方法（例では＃オートリサイズなど）とCSSに設定されている高さを無視して変更したかどうかを確認できますか？私はこれを使用して変数document.origContentHeightを更新し、スクリプトを再実行します。

ありがとうございました。

Answer 1

私はそれが働いている。私は少し考え直さなければならなかった。ソリューションはライブサイトにあります。

1は、テーブルの行には500msごとにchackingせずにサイズを変更したことを検出する方法はあります可能性が

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

であれば、私は変更したいと思います。私は(#content).resize(function()を試しましたが、動作させることができませんでした。

Answer 2

私は要素サイズはプラグインを使用したことを除いて変更したときに検出する方法があるとは思わない

、

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

ができますが、動的にページの変更にrefreshContentSize機能を呼び出すことはありませんなぜですか？

このjsFiddle DEMOを見ると、私の言うことを理解することができます。

またはJquery-resize-pluginを使用できます。