0

私は基本的にウェブサイトに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の高さに適切に調整されていない場合があります。

Chrome、Firefox、Safariでこの動作が見られます。他のブラウザはテストしていません。

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

4

2 に答える 2

1

JavaScript でこれを行うのは得策ではありません。ページを再構築するだけで、すべて HTML/CSS で実行できます。

于 2012-05-13T21:21:16.763 に答える
0

setDivHeight を呼び出す前に、ドキュメントがすべての要素の読み込みを完了したことを確認しましたか? 要素がまだロードされている前/最中に関数が呼び出された場合、読み取った高さは小さくなります。また、含まれる列の高さをコンテナー DIV の高さ (id='page2') と等しくなるように設定することも検討します。これは、最も長く含まれる要素まで自然に伸びます。

于 2012-05-13T21:41:49.420 に答える