html - 调整窗口大小时，我的 View 的页脚线和高度不断变化

Question

我有这个带有页脚的登录页面。页脚不断改变它的高度，直到它与 body 重叠。如果有人plesae可以提供帮助。我不知道这里发生了什么。我想在考虑调整大小的同时固定高度而不重叠





这是我的 css

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 30px; 
    margin-top: auto
}

我删除了 position看起来好多了，但是页脚已经变成了 body/html 背景之外



这是 html 和 body 的 css

html, body {
    height: 100%;
    background: url('../images/bg.jpg') no-repeat;
    background-size: cover;
}

Answer 1

我只能假设，但我可以看出哪里出了问题。尝试这个:

html, body {
    min-height: 100%; /* fixed it, because the regular height 100% will cause that white background of footer*/
}
body {
    /* we need background image only in body */
    background: url('../images/bg.jpg') no-repeat;
    background-size: cover;
}
.footer {
    /* we should remove position or set it relative */
    width: 100%;
    white-space: nowrap;
    line-height: 30px; 
    margin-top: auto
}

应该完美地工作。