1

ウィンドウのサイズが変更されたとき、または最初のロード時に呼び出される次のJQueryがあります。最初のロードで期待どおりに機能しないように見えるという問題がいくつかあります。誰かが誤動作しているものを教えてもらえますか？

JQuery（1.8.3）

function setContentHeight() {
    var height = $(document).height();
    $('#content, #content > div:first-child').height(height - 242);
    $('#content-text-description').height(height - 280);
}

$(window).resize(function(e) {
    setContentHeight();
});

$(document).ready(function(e) {
    setContentHeight();
});

HTML

<body>
    <div id="container">
        <div id="banner"></div> <!-- Header -->
        <div id="navi"></div> <!-- Navigation Pane -->
        <div id="content"> <!-- Content loaded with include -->
            <div id="home"> <!-- Start of content -->
                <div id="content-text-description"></div> <!-- container for custom scroller -->
            </div>
        <div id="footer"></div> <!-- Footer -->
    </div>
</body>

CSS

body {
   margin:0;
   font-family:"Century Gothic";
   line-height:30px;
}

#container {
    width:1024px;
    margin: 0 auto;
}

#banner {
    width:1024px;
}

#content {
    width:1024px;           
    height:470px;
    z-index:98;
    float:left; 
    top:-7px;   
    overflow:hidden;
}

#footer {
    text-align:center;
    background:#59585D;
    position:absolute;
    bottom:0px;
    width:1024px;
    height:30px;
    font-size:12px;
    color:#ffffff;
}

#content-text-description {
    padding-top:20px;
    display:block;
    width:800px;
    z-index:3;
    overflow:auto;
}

私の知る限り、JQueryビットは、ドキュメントの読み込み時またはウィンドウのサイズ変更時に、要求されたdivのサイズを変更することで期待どおりに機能するはずですが、そうではありません。

それは私が間違っていることですか、それとも私が達成しようとしていることは不可能ですか？

4

2 に答える 2

0

Cdocument.readyイベントは高さを確認するには早すぎます。代わりにdocument.loadイベントを使用してください

$（window）.resize（function（e）{setContentHeight（）;}）;

$（document）.load（function（e）{setContentHeight（）;}）;

理由はdocument.loadイベントで、dom全体がダウンロードされた直後に発生します。ただし、その時点でtmeレンダリングが行われていない、cssが適用されていない、画像がロードされていないなどの可能性があります。したがって、高さは正しくありません。

ただし、すべてがダウンロードされ、スタイルが適用された後にロードイベントが発生するため、正しい高さを取得する必要があります。

とにかく、これはスクリプトで行うべきことではなく、代わりにスタイリングで行います。

于 2012-11-29T14:55:13.827 に答える
0

コードをもう少し遊んで修正しました...

本当にシンプル。

var height = $(document).height();

次のように変更する必要があります：

var height = $(window).height();
于 2012-11-29T14:55:35.013 に答える