Bootstrap 4页脚覆盖正文问题求助（ASP.NET Core环境）

嘿，我来帮你搞定这个正文和页脚重叠的麻烦！这个问题根本不是层级（z-index）的问题，而是布局结构没给页脚留出足够空间，所以你调z-index才不管用~

给你两个实用的解决方案，按需选择：

方案一：让页脚始终固定在页面底部（推荐） #

这个方法用Bootstrap兼容的flex布局，不管内容长短，页脚都会稳稳待在页面底部，内容过长时也不会和正文重叠。

1. 打开你的site.css，添加以下CSS代码：

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

2. 修改_Layout.cshtml中的main标签，移除overflow-auto属性（这个属性会让正文在小容器内滚动，很容易导致和外部的页脚重叠）：

<main role="main" class="pb-3 small">
    @RenderBody()
</main>

设置完成后，body会变成垂直方向的flex容器，main区域会自动填充页面的剩余空间，页脚被自然推到页面底部。当内容过长时，页面整体滚动，完全不会出现重叠情况。

方案二：给正文容器添加足够的底部间距 #

如果你不想调整整体布局，只是临时解决重叠问题，可以给main标签添加一个足够大的底部边距，适配页脚的高度：

修改_Layout.cshtml中的main标签：

<main role="main" class="pb-3 small mb-5"> <!-- 使用Bootstrap的mb-5间距类，也可以自定义margin-bottom: 250px; -->
    @RenderBody()
</main>

不过这个方法灵活性稍差，因为页脚高度在不同屏幕尺寸下可能变化，所以更推荐方案一。

先试试方案一，应该就能完美解决你的问题啦！

内容的提问来源于stack exchange，提问作者ImGettingTooOldForThis