粘性页脚不起作用

Question

我只需要一个粘性页脚用于我的手机用户界面。 （未修复）我做了一个研究并玩这些代码。

主要内容

.public-profile {
    background-color: #30b29e;
    max-width: 460px;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

页脚

.pulic-profile-score {
    text-align: center;
    background-color: #2ba08e;
    padding: 15px;
    color: white;
    bottom: 0;
    position: absolute;
}

正如您所看到的，它并未停留在页面底部。它放在主要底部区域并显示白色空间区域。我很困惑。我已经给主要div提供了100％的高度，但它没有放在页面的底部。如果我将其更改为固定，则会在页脚和内容区域之间显示白色间隙。我在这里错过了什么？

Answer 1

尝试min-height：100％;在.public-profile

Answer 2

您需要将位置从absolute更改为fixed

Answer 3

您可以使用position:sticky，但请注意它的当前support。请查看here。

Answer 4

在此课程中添加这些

.pulic-profile-score { 
position: fixed;
min-height:10%;// 10% of the main Div
}