0

ページ コンテンツの高さがビュー ポートの高さよりも小さい場合、ビュー ポートのページ フッターの下部に合わせたいと思います。ページの高さがビュー ポートの高さを超える場合、フッターはそのコンテンツの下に配置する必要があります。

ビューポートの高さを確認して変更しました。ただし、一部のシナリオでは機能しません。

HTML:

<div id="page" class="page">
    <div id="header"></div>

    <div id="contentWrapper"></div>

    <div id="footer"></div>
</div>

Javascript:

        var vpHeight = getViewPort().height;
        var contentHeight = $("#contentWrapper").height();

        if (contentHeight < vpHeight) {
            $("#footer").css("position", "absolute");
            $("#footer").css("bottom", "0");
            $("#goToTop").hide();
        }
        else {
            $("#footer").css("position", "static");
            $("#footer").css("bottom", "auto");
            $("#goToTop").show();
        }


 function getViewPort() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window)) {
        a = 'client';
        e = document.documentElement || document.body;
    }

    return { width: e[a + 'Width'], height: e[a + 'Height'] }
};
4

1 に答える 1

0

その例を試してください：

<body>
<div class="page-wrapper">

<div class="page-buffer"></div>
</div>
<div class="page-footer">

</div>
</body>

そしてCSS：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.page-wrapper {
    min-height: 100%;
    margin-bottom: -50px;
}
* html .page-wrapper {
    height: 100%;
}
.page-buffer {
    height: 50px;
}

それはうまくいくはずで、その場合はJSは必要ありません。

元の記事はロシア語で書かれています: http://www.zakharov.ms/footer/ しかし、クロム翻訳機能を使用して、どのように機能するかを知ることができます。

于 2013-09-17T13:52:10.773 に答える