页脚停留在一页的底部，跳到另一页的中间

Question

我正在为Angular应用程序创建页脚。 这是我的页脚的代码：

// HTML
<footer class="footer">
    //  code for footer
</footer>

// LESS
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
    background-color: #ffffff;
}

.content {
    min-height: 500px;
}

// Application's layout:
<app-header1></app-header1>
    <div class="container content">
        <router-outlet></router-outlet>
    </div>
<app-footer></app-footer>

这在我的首页上工作正常。 但是，当我导航到其他页面时，页脚跳到页面的中间，并在滚动页面时停留在该页面的中间。 我注意到，如果我删除bottom: 0; ，然后页脚移至底部。 但是，当我导航回到主页（ bottom: 0; ）时，页脚不再停留在底部。 它浮动在首页内容和底部之间的中间位置。

bottom: 0; PAGES bottom: 0;

没有bottom: 0;

PAGE的position: fixed;

Answer 1

好吧，我认为您应该将footer更改为div，并将页脚置于上面所有块元素的下方

HTML

<div class="footer">
        //  code for footer
    </div>

CSS

.footer {
    position: absolute;
    width: 100%;
    height: fit-content;
    background-color: #ffffff;
}