8

ウィンドウ サイズからヘッダーとフッターの値を減算し、ドキュメントの読み込み時にコンテンツをこの値に設定することで、Web ページ コンテンツの高さを動的に設定しようとしています。

関数の各パラメーターは、要素の高さを取得するために要素 ID を受け取ります。content パラメータを除く。

 function setH(header, content, footer) 
{
    winH = top.innerHeight;
    winTitle = 32; // height value of the window title (part of the header)
    headH = $(header).outerHeight(true);
    footH = $(footer).outerHeight(true);
    contentH = winH - winTitle - headH - footH;
    $(content).css({'height' : (contentH) + 'px','overflow-y' : 'scroll'});
}

私が直面している問題は、outerHeight の値が間違った値を返していることです。ヘッダーは 23px を返し、フッターは 40px を返します。

FF と Chrome の要素を調べると、値は 25px と 44px です。

innerHeight、outerHeight、outerHeight(true) を使用してみましたが、正しい値が得られませんでした。

何がうまくいかないのかについての提案はありますか? または、コンテンツの高さを動的に設定する別の方法はありますか? 引っ張る髪がなくなってきたので、助けていただければ幸いです。

編集: iframe のコンテンツを扱っています。以下winH = top.innerHeightは、一番上のiframeウィンドウの高さの値を取得しています。

4

2 に答える 2

1

画面の幅/高さの計算に使用するスクリプトを変更しました。これが機能するかどうかを確認します。

    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerWidth;
        viewportheight = window.innerHeight;
        winTitle = 32;
        headH = $(header).outerHeight(true);
        footH = $(footer).outerHeight(true);
        contentH = viewportheight - winTitle - headH - footH;
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
        viewportwidth = document.documentElement.clientWidth;
        viewportheight = document.documentElement.clientHeight;
        winTitle = 32;
        headH = $(header).outerHeight(true);
        footH = $(footer).outerHeight(true);
        contentH = viewportheight - winTitle - headH - footH;
    }

    // older versions of IE

    else {

    viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
    viewportheight = document.getElementsByTagName('body')[0].clientHeight;
    }
    document.getElementById("content id").style.height = contentH + "px";
于 2013-03-18T15:19:09.400 に答える