Blazor Server应用：如何在MainLayout中实现Sticky Footer固定底部

安全阿岳

2026-7-25

实现Blazor Server应用固定底部页脚

问题分析

当前页脚随页面内容高度变化移动、无法固定在浏览器窗口底部的核心原因是：#app容器虽启用Flex布局，但内部的.page容器未占据剩余空间，导致页脚无法被“推”至窗口底部。

解决方案

只需调整CSS样式，让.page容器占据#app中除页脚外的所有可用空间，同时确保内部main区域能撑满剩余高度，具体修改如下：

修改后的site.css

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

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 使用100vh确保容器高度始终等于视口高度，比100%更稳定 */
    height: 100%;
}

.page {
    flex: 1; /* 让.page占据#app中除footer外的全部剩余空间 */
    display: flex;
    flex-direction: column; /* 开启内部Flex布局，让main区域能自动撑高 */
}

main {
    flex: 1; /* 让main区域占据.page中的剩余空间，内容不足时自动填充高度 */
}

.footer {
    padding: 20px;
    text-align: center;
    /* 可选：添加背景色区分页脚与内容 */
    /* background-color: #f5f5f5; */
}

确认MainLayout.razor结构

现有结构无需调整，确保#app容器包含.page和footer两个子元素即可：

@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>