2

ASP.NET と C# を使用しています。画面解像度に基づいて div タグの高さを変更する必要があります。これは私が試したものです。

function setHeight() {
        var footer = document.getElementById('footerSection').offsetHeight;
        var h = document.documentElement.offsetHeight - footer;
        document.getElementById('rightContent').style.height = h+"px";    
};

このスクリプトは、body タグの onload からこのように呼び出しています。

<body onload="setHeight();">

それは機能していますが、この高さはレンダリングが終了した後にその div に割り当てられています。そのため、最初に内部のコンテンツに基づいて割り当てられた高さで表示され、数分の一秒後に高さが割り当てられたものに変更されます。

レンダリング前またはウィンドウに読み込まれる前に高さを設定することは可能ですか? 実際には、ユーザーにその高さの変化を見せたくありません。

4

4 に答える 4

1

これは、jquerydomreadyハンドラーで実現できます。

最初にjqueryプラグインを一番上に追加します（最新のもの1.8.2 ir 1.8.3）

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>

次にこれ：

<script>
function setHeight() {
    var footer = document.getElementById('footerSection').offsetHeight;
    var h = document.documentElement.offsetHeight - footer;
    document.getElementById('rightContent').style.height = h+"px";    
}

$(function(){
   setHeight();
});
</script>
于 2012-12-20T11:31:57.783 に答える
1

質問にjQueryのタグを付けたので、コードを変更して、DOM対応ハンドラーでjQueryを使用し、FOUC（スタイルなしコンテンツのフラッシュ）を停止することができます。

これを試して：

<script type="text/javascript">
    function setHeight() {
        var footerTop = $('#footerSection').offset().top;
        var h = $(document).height() - footerTop;
        $('#rightContent').height(h);
    };

    $(function() {
        setHeight();
    });
</script>
于 2012-12-20T11:32:12.290 に答える
1

ページが読み込まれ、コンテンツが表示されると同時に高さが設定されるように、コンテンツを div に動的に追加するのはどうですか?

または、div に最初に display:none; のスタイルを指定します。

<div id="rightContent" style="display:none">

そして、setHeight() に以下を追加します。

document.getElementById('rightContent').style.display = "block";
于 2012-12-20T11:27:50.243 に答える
0

スタイルシートで設定することにより、ページがレンダリングされる前にの高さを設定できます。<div>

ただし、コードはドキュメントとフッターの高さを調べて、ドキュメントの高さを計算し<div>ます。ページがレンダリングされるまで、ドキュメントまたはフッターの高さはわかりません。

jQuery の ready イベントを使用して、関数をより早く起動させることができます。<div>ユーザーが高さの変化を見ないようにするのに十分な速さかもしれません。

于 2012-12-20T11:30:20.523 に答える