Question

当我的页面内容高度小于查看端口的高度时，我希望适合我的页面底部视图端口。如果页面高度超过了视图端口的高度，则页脚应低于该内容。

我检查了视口的高度并改变了它。但在某些情况下它不起作用。

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'] }
};

Answer 1

试试这个例子：

<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 translate函数来了解它的工作原理。

在动态页面高度变化的视口底部适合页脚

1 个答案: