ASP.NET首页Footer出现在div上方、页面缩放内容右移问题求助

核心问题成因 #

• 首页.flex-container设置了position: fixed，固定定位元素完全脱离正常文档流，外层.body-content容器无法计算其高度，导致footer直接排布在无高度的@RenderBody()下方，出现在菜单栏下方并和内容重叠
• 首页额外给body设置了display: flex布局，和Bootstrap默认布局、Layout的结构规则冲突，导致缩放时内容偏移
• .flex-container的固定定位未设置top/left锚点，页面缩放时定位基准混乱，触发内容右偏移
• Index.cshtml重复定义<head>标签，导致HTML结构解析异常，部分样式不生效
• 冗余的负边距margin-bottom: -115px进一步打乱布局计算逻辑

具体修复步骤 #

步骤1：清理Index.cshtml冗余结构并替换样式 #

首先删除Index.cshtml中多余的<head>和</head>标签，再将原有的style块内容替换为以下代码：

#myMap {
    width: 30vw;
    height: 30vh;
}

.flex-container {
    display: flex;
    padding-top: 10px;
    width: 80vw;
    /* 可根据实际导航高度调整最小高度，确保容器撑到页面底部 */
    min-height: calc(100vh - 180px);
}

.flex-child {
    flex: 1;
    border: 2px solid yellow;
    max-width: 49%;
}

.flex-child:first-child {
    margin-right: 20px;
    height: auto;
    max-width: 49%;
}

步骤2：可选适配调整 #

如果首页内容顶部被固定导航栏遮挡，将.flex-container的padding-top调整为60px即可。

修复效果验证 #

• flex容器回归正常文档流，外层容器可正确识别内容高度，footer自动排布在页面底部，不再发生重叠
• 移除冲突的body布局规则后，缩放页面不会再出现内容右偏移问题
• 最小高度设置生效后，flex容器可自动延伸至接近页面底部，符合布局预期

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