MainLayout 中的粘性页脚

Question

这是一个 Blazor（服务器）应用程序，但我认为这个问题是纯 CSS。

我希望我的页脚粘在网页底部并始终显示（即如果浏览器很短则不会消失）。我在哪里/如何放置这个页脚？我更喜欢将它放在 MainLayout.razor 中，但如果需要，我可以将它作为 DxFormLayout 和 DxStackLayout 的一部分放在每个页面中。

MainLayout.razor：

@inherits LayoutComponentBase

<PageTitle>Volunteer Central</PageTitle>

<div id="app">
    <div class="page">
        <NavMenu />

        <main>
            <article class="content px-4">
                @Body
            </article>
        </main>
        <hr />
    </div>
    <footer class="footer">
        <p>&copy; David Thielen 2023 - ALL RIGHTS RESERVED</p>
    </footer>
</div>

网站.css：

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.main-content {
    flex: 1;
}

.footer {
    padding: 20px;
    text-align: center;
}

我用谷歌搜索，搜索 StackOverflow，并询问了 ChatGPT，所有这些都提供了一堆不起作用的建议。一切都将页脚放在页面其余内容之后。

有人知道如何做到这一点吗？

Answer 1

我认为

position:fixed

对你来说可能就足够了。只需确保对于大页面，在末尾留一个空格，这样页脚就不会覆盖重要内容。

@page "/"

<div style="height:200%; background-color:lightskyblue">
    <h3>My Long Page</h3>
</div>

<div style="position:fixed; bottom:0; left:0; width:100%; background-color:pink">
    This is my footer
</div>

@code {

}