html - 页脚在一个页面中停留在底部并跳转到另一页的中间

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; 的页面

没有 bottom: 0; 的页面

位置:固定的页面；

Answer 1

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

HTML

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

CSS

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