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/ 但是您可以使用 chrome 翻译功能来了解它的工作原理。

于 2013-09-17T13:52:10.773 回答