CSHTML侧边导航与页脚重叠问题修复请求

我的CSHTML项目中，固定定位的左侧vertical-menu与footer出现重叠，滚动页面时侧边栏菜单会被页脚遮挡。希望页脚能处于侧边栏下方，避免重叠。以下是相关代码：

Layout.cshtml代码 #

<!DOCTYPE html>
<html lang="en">
<body>
    <!-- Begin page -->
    <div id="layout-wrapper ">
        <div class="desktop-menu">

        <!-- Header -->
        @Html.Partial("_Header")
        <!-- End Header -->
        <!-- Left Sidebar -->
        @Html.Partial("_LeftSidebar")
        <!-- End Left Sidebar -->
        </div>
        <!-- ============================================================== -->
        <!-- Start right Content here -->
        <!-- ============================================================== -->
        <div class="main-content">
                <!-- Start content -->
                @RenderBody()
                <!-- End content -->
            <!-- End Page-content -->            
        </div>
        <!-- end main content-->
       
    <!-- Footer -->
    @Html.Partial("_Footer")
    <!-- End Footer -->
</body>
</html>

_leftSidebar.cshtml代码 #

<div class="vertical-menu position-fixed">
        <!-- LOGO -->
        <div data-simplebar class="sidebar-menu-scroll">
            <!--- Sidemenu -->
            <div id="sidebar-menu">
                <!-- Left Menu Start -->
                    <ul class="metismenu list-unstyled" id="side-menu">
                        <button type="button" id="side-short"
                            class="btn btn-sm px-3 font-size-16 header-item vertical-menu-btn">
                        <i class="fa fa-fw fa-bars"></i>
                    </button>
                    <button type="button"
                            class="btn btn-sm px-3 font-size-16 header-item vertical-menu-btn vertical-menu-btn-one">
                        <i class="fa fa-fw fa-bars"></i>
                    </button>
                    <li class="menu-title">Menu</li>

                    <li>
                        <a href="index.html" class="active">
                            <div class="home-menu">
                                <span class="icon-home icon"></span>
                                <span class="menu-title-one">Home</span>
                            </div>
                        </a>
                    </li>

                    <li class="ins-listing">
                        <a href="javascript: void(0);" class="has-arrow-one ">
                            <div class="home-menu home-menu-one has-arrow">
                                <span class="icon-Instance icon"></span>
                                <span class="menu-title-one">test</span>
                            </div>
                        </a>
                        <ul class="sub-menu" aria-expanded="true">
                            <li>
                                <a href="test.html">test</a>

                            </li>
                            <li>
                                <a href="test.html">test</a>
                            </li>
                        </ul>
                    </li>  </ul>
                }
                       </div>
    </div>

_footer.cshtml代码 #

<footer class="footer">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3 col-6">
                <ul class="footer-ul">
                    <div class="footer-titel">Quick Links</div>
                    <div class="footer-border"></div>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                </ul>
            </div>                    
        </div>
    </div>
</footer>

<div class="container-fluid">
    <div class="row copye">
        <div class="col-sm-6">
            &copy; test
        </div>
        <div class="col-sm-6">
            <div class="text-sm-end d-none d-sm-block">
                <b>Version</b> 1.0
            </div>
        </div>
    </div>
</div>

相关CSS样式 #

.vertical-menu {
     width: 250px;
     background: var(--bs-sidebar-bg);
     bottom: 0;
     margin-top: 0;
     position: fixed;
     top: 0;
     -webkit-box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
     box-shadow: 0 2px 4px rgba(15, 34, 58, .12)
}

.footer {
     bottom: 0;
     padding:50px calc(1.25rem / 2);
     right: 0;
     color: var(--bs-footer-color);
     z-index: 1001;
     position: relative;
     -webkit-box-shadow: 0 0 4px rgba(15, 34, 58, .12);
     box-shadow: 0 0 4px rgba(15, 34, 58, .12)
}

解决方案 #

方法一：调整侧边栏底部位置，避开页脚 #

先确定页脚的总高度（包括下方的版权栏），修改.vertical-menu的bottom属性，让侧边栏底部停在页脚上方，同时开启侧边栏的垂直滚动：

.vertical-menu {
     width: 250px;
     background: var(--bs-sidebar-bg);
     bottom: 200px; /* 替换为实际页脚总高度 */
     margin-top: 0;
     position: fixed;
     top: 0;
     -webkit-box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
     box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
     overflow-y: auto; /* 内容过长时可滚动 */
}

如果页脚高度不固定，用JS动态计算：

function adjustSidebar() {
    const footer = document.querySelector('.footer');
    const copyBar = document.querySelector('.copye');
    const totalFooterHeight = footer.offsetHeight + copyBar.offsetHeight;
    document.querySelector('.vertical-menu').style.bottom = `${totalFooterHeight}px`;
}

// 页面加载和窗口 resize 时重新计算
window.addEventListener('load', adjustSidebar);
window.addEventListener('resize', adjustSidebar);

方法二：调整页脚布局，让它避开侧边栏 #

给页脚添加左侧内边距，匹配侧边栏宽度，同时降低侧边栏的z-index，确保页脚在上方：

.vertical-menu {
     width: 250px;
     background: var(--bs-sidebar-bg);
     bottom: 0;
     margin-top: 0;
     position: fixed;
     top: 0;
     z-index: 999; /* 低于页脚的1001 */
     -webkit-box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
     box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
     overflow-y: auto;
}

.footer {
     bottom: 0;
     padding:50px calc(1.25rem / 2);
     padding-left: calc(250px + 1.25rem / 2); /* 侧边栏宽度+原有内边距 */
     right: 0;
     color: var(--bs-footer-color);
     z-index: 1001;
     position: relative;
     -webkit-box-shadow: 0 0 4px rgba(15, 34, 58, .12);
     box-shadow: 0 0 4px rgba(15, 34, 58, .12);
}

.main-content {
    margin-left: 250px; /* 主内容区避开侧边栏 */
}

方法三：改为绝对定位布局，让侧边栏跟随容器 #

将布局容器设为相对定位，侧边栏改为绝对定位，页脚固定在容器底部：

#layout-wrapper {
    position: relative;
    min-height: 100vh; /* 确保容器占满视口高度 */
}

.vertical-menu {
     width: 250px;
     background: var(--bs-sidebar-bg);
     bottom: 0;
     margin-top: 0;
     position: absolute; /* 改为绝对定位，相对于layout-wrapper */
     top: 0;
     -webkit-box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
     box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
}

.main-content {
    margin-left: 250px;
    padding-bottom: 200px; /* 留出页脚高度 */
}

.footer {
     position: absolute;
     bottom: 0;
     width: 100%;
     padding:50px calc(1.25rem / 2);
     padding-left: calc(250px + 1.25rem / 2);
     color: var(--bs-footer-color);
     z-index: 1001;
     -webkit-box-shadow: 0 0 4px rgba(15, 34, 58, .12);
     box-shadow: 0 0 4px rgba(15, 34, 58, .12);
}

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