Blazor Server项目页脚需滚动才显示的问题解决咨询

问题说明 #

使用Visual Studio标准模板构建Blazor Server项目，在_Layout.cshtml中定义页脚后，所有页面（含默认及自定义页面）的页脚无法直接显示在视口底部，必须滚动页面才能看到，问题根源在于布局的弹性容器配置缺失。

需要修改的设置 #

1. 调整site.css基础样式 #

修改html和body的样式，让它们占满整个视口高度，并设置为垂直方向的弹性布局，为后续布局提供基础：

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100vh; /* 占满视口高度 */
    margin: 0; /* 移除默认边距 */
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
}

2. 修改MainLayout.razor.css的.page类 #

为.page容器添加flex: 1属性，让它自动填充body中除页脚外的所有可用空间，从而将页脚推到视口底部：

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1; /* 添加此行，让容器占满剩余空间 */
}
main {
    flex: 1;
}
/* 其余原有样式保持不变 */

3. 保留_Layout.cshtml原有结构 #

原_Layout.cshtml的结构无需调整，页脚已处于body末尾位置，配合上述弹性布局配置即可实现预期效果：

<body>
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <footer class="footer border-top pl-3 text-muted">
        <div class="container">
            &copy; 2023 - MyWebsite.com - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>
</body>

效果说明 #

修改完成后：

• 当页面内容较短时，页脚自动固定在视口底部，无需滚动即可看到
• 当页面内容超过视口高度时，页脚会被推到内容最下方，滚动到底部即可查看

内容的提问来源于stack exchange，提问作者Paul.B