在动态更改页面高度时将页脚调整在视口底部

当我的页面内容高度小于视口高度时，我想调整视口的页面页脚底部。如果页面高度超过视口的高度，则页脚应位于该内容下方。

我已经检查了视口的高度并对其进行了更改。但在某些情况下，它不起作用。

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

试试这个例子：

<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翻译功能来了解它的工作原理。

相关内容

最新更新

热门标签：