使用 flex 布局，页脚没有完全下降到底部 [重复]

Question

我试图为我的网站制作粘性页脚，在这种情况下，出于特定原因，我使用 javascript 创建元素，我创建了<footer> 元素，并尝试在每个宽度分辨率下将其完全置于底部。

我只想在正文处添加页脚，所以这是我的 javascript：

$(function () {
    $('.products').each(function(i, obj) {
        if (i > 0) {
           obj.id = "p" + i
           var pl = document.createElement("footer");
           var t = document.createTextNode(i);
           pl.className = "pageblock"
           pl.appendChild(t);
           document.body.appendChild(pl);
        }
    });
});

这将创建页脚，在这种情况下仅创建单个页脚，.pageblock 类的编辑样式有效。

为了让页脚完全下降，我试过这个：

.pageblock {
    clear: both;
    position: relative;
    text-align: center;
    bottom: 0;
    z-index: 10;
    font-family: 'Lato';
    font-size: 3em;
    color: white;
    font-weight: bold;
}

但由于某种原因，它仍然无法工作，它会卡在垂直中心附近的某个地方。 Check for "1" here.

我在网站上有 flex 布局，因此元素会随着浏览器水平缩放并增加垂直尺寸。

---

有什么方法可以将元素完全移动到底部，以便它始终存在，即使垂直尺寸变大或变小？有什么办法可以做到这一点，而无需将所有内容都包装在单个 div 中，这可能会损坏代码本身？

谢谢！

Answer 1

如果没有 flex 设置和 html，很难准确地说出您需要什么，但直觉上，您可能需要

html, body {
    min-height: 100%;
}

如果您的应用程序允许。您的 flex 元素垂直拉伸到正文的高度，即内容的高度，因此您的页脚已经在底部。通过将最小高度设置为 100%，您可以将 html 和 body 设置为窗口高度，从而正确拉伸元素并将页脚置于底部。