ウェブページ上のdivの高さを動的にサイズ変更

Question

私は基本的にウェブサイトに3列レイアウトを使用しています。私が達成したいのは、中央の（コンテンツ）列の高さが右側の列（サイドバー）に調整されているため、中央の列の右側の境界線がページの下部まで達するということです。さらに、左の列には他の列の高さを調整し、ページの一番下の背景イメージ単位で塗りつぶします。

ウェブサイト：http://www.massageforum.be

これは私がこれまで行ってきたものです（背景画像付き=左の列panel_leftは、panel_rightはDIVのコンテンツ（中段）とサイドバー（右列）のために、周囲のdiv要素です） ：

function setDivHeight() { 
    //set height of content according to sidebar if content is smaller than sidebar 
    var DivHeightSidebar = document.getElementById('sidebar').offsetHeight; 
    var DivHeightContent = document.getElementById('content').offsetHeight; 

    if(DivHeightContent < DivHeightSidebar) 
    { 
     document.getElementById('content').style.height = DivHeightSidebar + 'px'; 
    }   

    //set height of panel_left according to panel_right so background image reaches until bottom of page 
    var DivHeight = document.getElementById('panel_right').offsetHeight; 
    document.getElementById('panel_left').style.height = DivHeight + 'px'; 
} 

この機能は、</body>タグの直前のすべてのページで呼び出されます。

問題はそれが時々作品ですが、時々ではありません。場合によっては、コンテンツ列の高さがサイドバーの列の高さに調整されますが、長めでコンテンツはもはや適合しません。スクリーンショット：http://www.massageforum.be/Massageforum1.png

また、時には左のカラムの高さを適切panel_rightの高さに調整されていません。

私はクロム、FirefoxとSafariでこの動作を参照してください。他のブラウザをテストしませんでした。

この機能をより堅牢にする方法についてのアドバイスはありますか？

Answer 1

JavaScriptでこれを行うのは良い考えではありません。単にページを再構成し、HTML/CSSでそれをすべて行います。

Answer 2

は、ドキュメントがsetDivHeightを呼び出す前に、すべての要素をロードし終えたことを確認しましたか？ 関数がbefore/while要素がまだ読み込まれているときに呼び出された場合、読み込んだ高さは小さくなります。 私は、含まれている列の高さをコンテナーのDIVの高さ（id = 'page2'）と同じにすることも考えています。