2

この CSS レイアウトは Firefox/Opera と Safari の両方で正常に動作しますが、Chrome では動作が少し異なります。

私はいつも持っています：

* { margin: 0; padding: 0; }

html, body { height: 100%; }

div#container {
    min-height: 100%;
    width: 1000px;      /* giving the page a fixed width */
    margin: 0 auto;     /* centering the page */
    position: relative; /* making the footer stop when it meets the content */
}

これで、Chrome でページを更新する場合を除いて、すべて正常に動作します。他のすべてのブラウザーでは、ページを更新するとコンテンツが適応し、(ページの高さがコンテンツの最小の高さより小さくない場合) ページ全体を表示するために下にスクロールする必要はありません。Chrome では、更新するとページが画面よりも大きくなり、すべてを表示するには下にスクロールする必要があります。メイン セクションの高さを超えていないため、コンテンツは問題にならないことに注意してください。

HTML レイアウトは基本的に次のとおりです。

<body>
    <div id="container">

        <header>stuff...</header>

        <section id="page_content">stuff...</section>

        <footer>stuff...</footer>
    </div>
</body>

そして、それが役に立てば、メイン コンテンツの CSS は次のとおりです。

section#page_content {
    height: 100%;       /* pay attention: height is actually handled */
    min-height: 400px;  /* by the jQuery code, which resizes it dynamically */
    max-height: 1000px;
    width: 802px;
    margin: 0 auto;
    display: block;
    overflow: auto;
}

また、この JS 関数は、ページのサイズが変更されるたびに、ページが読み込まれるたびに呼び出されます。

function resizeMainSection() {
    var finalHeight = $(window).height()
        - $('footer#page_footer').outerHeight(true)
        - $('header#page_header').outerHeight(true) // a simple div to stop the footer from going over the content when resizing
        - $('div#footer_stopper').outerHeight(true);
    var mainSection = $('section#page_content');

    if (finalHeight < mainSection.css('min-height')
        || finalHeight > mainSection.css('max-height')) return;
    $(mainSection).height(finalHeight);
}

考えられる原因は何ですか?

編集

ページを更新Cmdした場合 ( +Rまたは更新ボタンを使用) にのみ、この問題が発生することに注意してください。同じ URL をブラウザに再挿入してクリックEnterすると、レイアウトが正しくスタイル設定されます。誰かがコメントで提案したように、キャッシュの問題かもしれません。

4

1 に答える 1

0

より良いスクリプトは、末尾を変更することだと思います

if (finalHeight < mainSection.css('min-height')
    || finalHeight > mainSection.css('max-height')) return;
$(mainSection).height(finalHeight);

に：

if (finalHeight < mainSection.css('min-height') 
    finalHeight = mainSection.css('min-height');
if (finalHeight > mainSection.css('max-height')
    finalHeight = mainSection.css('max-height');
$(mainSection).height(finalHeight);

つまり、高さは最小値と最大値によって制限される値です。計算された値が最小値を下回っている場合、適切なアクションは、スクリプトを終了するのではなく、最小値に設定することです

于 2013-05-25T11:07:59.423 に答える